Vue打包后的index.html怎么打开_预览dist目录下的index.html

直接双击打开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 协议。