双击打开打包后的index.html显示404或空白页，是因file://协议被浏览器安全策略限制，导致相对路径解析失败和资源加载被拦截；必须通过本地http服务器（如http-server或python内置服务）访问才能验证真实404并修复。
index.html 文件，必然触发浏览器的 file:// 协议限制，这不是 404 错误，而是安全策略拒绝加载资源——真 404 只在 HTTP 服务下出现。必须用本地服务器访问才能验证和修复。
为什么打包后双击打开显示 404 或空白页
浏览器地址栏是 file:///xxx/dist/index.html 时，所有相对路径（如 ./assets/js/app.js、../src/data.json）都会解析失败；fetch、import、iframe 等操作被拦截，控制台报 Not allowed to load local resource 或直接静默失败。
这不是路径写错了，是协议层面不支持。
- 所有现代浏览器（Chrome/Firefox/Edge）默认禁用跨目录读取本地文件
-
./和../在file://下行为不可靠，不同系统表现不一致 - Vite、Webpack 等构建工具生成的资源路径默认基于 HTTP 根路径（
/），不是文件系统相对路径
Vite 项目打包后 404 的核心修复：改 base 配置
Vite 默认把资源路径设为绝对根路径（/assets/xxx.js），但你用 file:// 打开时，浏览器会去请求 file:///assets/xxx.js —— 显然不存在。解决方法是让构建输出使用相对路径。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
vite.config.ts中设置base: './'（注意结尾无斜杠） - 不要用
base: ''，它会导致路径拼接异常（如./js/app.js变成js/app.js） - 若部署在子路径（如
https://example.com/myapp/），则设为base: '/myapp/'，且必须带结尾斜杠 - 改完重新运行
npm run build，再检查dist/index.html中的 script/src、link/href 是否都以./开头
确认是否真有 HTTP 404：必须走本地服务器
只有通过 http:// 访问才能触发真实 404，也才能验证路径和配置是否生效。
- Python 用户：进
dist/目录，运行python3 -m http.server 8000，然后访问http://localhost:8000/ - Node.js 用户：全局装
http-server，运行npx http-server -p 5000 -c-1 dist（-c-1禁用缓存） - 别用 VS Code Live Server 插件后还拖文件到浏览器——它给的链接才是有效地址
- 打开开发者工具 → Network 标签页，刷新页面，看哪些请求标红并返回 404，点开看它的
Request URL，这就是你要对齐的真实路径
其他常见漏点：大小写、扩展名、隐藏字符
Linux/macOS 服务器严格区分大小写，Windows 本地开发常掩盖问题，一上线就 404。
- 检查
dist/下文件名是否与 HTML 中引用的完全一致：main.js≠Main.js，logo.png≠logo.PNG - Windows 要开启“显示文件扩展名”，确认不是
index.html.txt被当成index.html - 路径中含中文或空格？浏览器自动编码（
%E4%BD%A0），但文件名没编码就会 404；静态资源一律用小写 ASCII 命名最稳妥 - 如果用了
<base href="/sub/">，但没配 Vite 的base或部署路径不匹配，所有相对路径都会偏移——删掉<base>是最快验证方式
file:// 下的“加载失败”和 HTTP 下的“404”。先确保用 http://localhost 访问，再看 Network 里哪个请求红了，最后比对那个 URL 和 dist/ 目录结构——三者对齐，问题就解了一半。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
