直接双击打开dist/index.html会白屏，因file://协议触发浏览器跨域限制，禁止fetch等资源加载；应使用vite preview或http-server启动http服务预览。
直接双击打开 dist/index.html 会白屏？这是跨域限制
浏览器出于安全策略，用 file:// 协议直接打开本地 HTML 文件时，会禁止加载 fetch、XMLHttpRequest、import() 动态导入等资源，而 Vue CLI 打包后的 index.html 默认通过 fetch 加载 assets/index-xxx.js 等资源，导致 JS 报错、页面空白。
用本地 HTTP 服务启动最稳妥（推荐 vite preview）
Vue CLI 5+ 和 Vite 都内置了轻量预览命令，不依赖全局安装，也不需要额外配 Web 服务器：
- 如果是 Vue CLI 项目：运行
npm run serve（开发模式），或构建后执行npx http-server dist -p 8080（需先npm install -g http-server） - 如果是 Vite 项目（含 Vue 3 官方模板）：构建后直接运行
npx vite preview，它会自动读取vite.config.js中的base配置，并在http://localhost:4173启动静态服务 - 注意：Vite 的
vite preview不支持热更新，仅用于验证打包结果是否可运行
dist/index.html 中的 base 路径必须和部署路径一致
Vue 项目打包时，资源引用路径由 vue.config.js（CLI）或 vite.config.js 中的 base 字段控制。如果部署到子路径（如 https://example.com/my-app/），必须设 base: '/my-app/'，否则 index.html 会尝试从根目录加载 JS/CSS，404。
- 默认值是
'/'，适用于部署到域名根路径 - 设为
'./'可让所有资源相对index.html加载，适合双击预览（但仍有跨域风险，不推荐生产验证） - Vite 中修改
base后需重新npm run build，否则vite preview仍按旧配置解析路径
Chrome 禁用安全策略强行打开？仅限临时调试
仅当必须用 file:// 协议双击打开时才考虑，且仅限本地调试，不可用于验证真实部署行为：
- macOS：终端执行
open -n -a "Google Chrome" --args "--disable-web-security" "--user-data-dir=/tmp/chrome_dev_test" - Windows：右键 Chrome 快捷方式 → 属性 → 目标末尾加
--disable-web-security --user-data-dir=C:\chrome-dev - ⚠️ 此方式禁用的是整个浏览器的安全模型，关闭该窗口前不要访问其他网站
真正要确认上线效果，唯一可靠的方式是用真实 HTTP 服务（vite preview 或 http-server）跑起来，因为线上环境永远是 HTTP/HTTPS 协议。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
