记一次 Vue 项目打包后白屏的排查过程

上周把公司一个后台项目从开发环境发到测试环境，本地 npm run dev 一切正常，npm run build 打完包丢到服务器上，打开就是一片白。控制台没报错，Network 里 index.html 也 200。这种问题最烦，因为「没有错误」本身就是最大的错误提示。

第一步：确认不是浏览器缓存

先 Ctrl+F5 强刷，换无痕窗口，换浏览器，问题依旧。排除缓存。

第二步：看 Console 和 Sources

Console 干净得可怕。打开 Sources 看 index.html，发现引用的 js 路径是 /static/js/app.xxxx.js，而实际部署目录在子目录 /admin/ 下。也就是说，资源请求到了根目录，服务器返回了 index.html（因为配了 try_files），浏览器把 HTML 当 JS 解析，静默失败。

根因是 vue.config.js 里 publicPath 没改成 /admin/，默认是 /。

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/',
  outputDir: 'dist',
  assetsDir: 'static'
}

顺便记一下这类问题的通用排查顺序

• Network 里看 js/css 是否 200，返回内容是不是 HTML
• Sources 里看 index.html 引用的路径对不对
• 确认部署目录和 publicPath 是否匹配
• 确认 Nginx 的 try_files 配置
• 路由 mode 是 history 还是 hash，history 需要服务端兜底

白屏问题十有八九是资源路径或者路由兜底，先看 Network，比瞎猜快得多。