WebStorm 无法直接双击 dist/index.html 预览，因 Vue Router history 模式依赖 HTTP 服务的路由 fallback 和绝对路径解析，而 file:// 协议不支持；推荐使用 vite preview 启动真实静态服务器，它自动处理 SPA 回退且环境一致。
WebStorm 本身不提供本地预览功能，打包后必须用 HTTP 服务器打开 dist 目录，直接双击 index.html 会因路径和路由问题白屏或 404。
为什么不能直接双击 dist/index.html？
Vue（尤其是 Vue Router 默认的 history 模式）依赖服务端对所有路径返回 index.html，而 file:// 协议不支持该行为；同时资源路径（如 assets/js/app.abc123.js）默认按绝对路径 /assets/... 加载，本地文件系统无法解析。
- 现象：空白页、控制台报
Failed to load resource: net::ERR_FILE_NOT_FOUND - 根本原因：缺少 HTTP 服务 + 路由 fallback + 正确的
base配置 - 不是 WebStorm 的限制，而是浏览器安全机制和前端路由模型决定的
最稳妥的预览方式：用 vite preview 启动生产环境镜像服务
这是 Vite 官方推荐、与部署环境最一致的方式。它启动一个真实静态服务器，并自动处理 SPA 路由回退（404 → index.html）。
- 确保
package.json中有"preview": "vite preview"脚本（Vite 项目默认自带） - 先执行
npm run build，再执行npm run preview——preview不会自动触发 build - 默认访问
http://localhost:4173，该地址加载的是真实的dist内容，环境变量读取.env.production - 若需代理后端接口，要在
vite.config.js中配置preview.proxy，而非server.proxy
其他可用命令行工具（当 vite preview 不可用时）
适用于非 Vite 项目，或想快速验证资源路径是否正确。
立即学习“前端免费学习笔记（深入）”；
-
serve -s dist：最轻量，-s参数启用 SPA 模式，自动 fallback；需全局安装npm install -g serve -
http-server dist：默认不 fallback，需加-p 8080 -a localhost -c-1，并手动配置服务端重定向（不推荐用于 Vue Router history 模式） - 避免用 Python 的
python -m http.server或 Node 原生http模块——它们不处理 SPA 回退，刷新路由必 404
如果坚持要双击打开，必须满足两个硬性条件
仅限纯静态展示、无路由跳转、无动态 API 调用的极简场景，且需主动降级适配。
- 在
vite.config.js中设base: './'（Vite）或publicPath: './'（Vue CLI），让所有资源路径变为相对路径 - Vue Router 必须切换为
hash模式：createRouter({ history: createWebHashHistory() }) - 仍需重新
npm run build，否则dist中的路径不会更新 - 即使满足以上，API 请求、跨域、部分第三方 SDK（如 Sentry）仍可能异常，不建议用于功能验证
真正容易被忽略的点是：很多人改了 vite.config.js 的 base，却忘了同步调整 router 的 history 模式，或者没意识到 vite preview 和 npm run dev 读取的是不同环境变量文件——这些细微差异恰恰是测试环境出问题的根源。
