白屏最根本的信号是HTML文件未被浏览器当作HTML解析，应首先检查Network面板中index.html的状态码（如404/403）和Content-Type（非text/html会导致下载而非渲染），并验证响应内容、路径配置、缓存策略及HTML语法与脚本执行情况。
检查 Network 面板里 index.html 的状态码和 Content-Type
白屏最根本的信号，是 HTML 文件压根没被浏览器当成 HTML 解析。打开开发者工具（F12），切到 Network 面板，刷新页面，第一眼就盯住 index.html 这一行：
- 状态码是
404或403？说明路径错了、大小写不一致、服务器没配路由回退，或者文件根本没部署上去 - 状态码是
200但Content-Type不是text/html？比如返回了application/octet-stream或空值，浏览器会把它当二进制下载，而不是渲染——常见于用file://协议直接双击打开，或某些静态服务没设 MIME 类型 - 右键页面空白处选“查看页面源代码”，如果一片空，说明服务器返回了空响应；如果能看到原始 HTML 文本但页面不渲染，大概率是
Content-Type错了
确认资源路径是否因 publicPath / assetPrefix 导致 404
打包后 JS/CSS 路径变成 /js/app.xxx.js 这种绝对路径，本地用 file:// 打开时，浏览器会从磁盘根目录找 /js/，自然 404。Vue CLI 默认 publicPath: '/'，Rsbuild 默认 assetPrefix: '/'，都踩这个坑。
- Vue CLI：在
vue.config.js改成publicPath: './' - Vite：在
vite.config.ts设置base: './' - Rsbuild：在
rsbuild.config.ts的output下加assetPrefix: './' - 注意：改完必须重新
npm run build，旧 dist 目录不会自动更新
排查微信或旧版浏览器缓存 index.html 导致 ChunkLoadError
发版后用户首次打开白屏，刷新一次又好了——基本锁定是微信内置浏览器强缓存了旧版 index.html，而它引用的 app.xxx.js 已被 CDN 清理，导致 ChunkLoadError 报错，页面卡死。
- 不能只靠文件名哈希，
index.html自身必须避免被长期缓存 - Nginx 配置中单独对
/index.html加响应头：add_header Cache-Control "no-cache, no-store, must-revalidate" - 或者启用 ETag +
If-None-Match，内容变更时自动失效，比全禁缓存更平衡 - 上线后可临时用
curl -I https://your.com/index.html看响应头是否生效
验证 HTML 结构和 script 执行是否中断渲染
哪怕资源全加载成功，页面也可能白屏——因为 HTML 解析失败，或脚本执行阻塞且报错。
立即学习“前端免费学习笔记（深入）”；
- 用 W3C Validator 检查语法，重点关注
Unclosed element、Stray end tag，比如<script>...</script>里写了未转义的<，会提前截断 DOM - 打开 Console 面板，看有没有
ReferenceError、SyntaxError，尤其出现在第一个<script>标签里——浏览器遇到致命错误会停在那，后续 DOM 不画 - 临时把所有
<script>标签注释掉，只留<body><h1>test</h1></body>，能显示说明问题出在 JS 层
