Vue生产构建（npm run build）页面空白但资源已加载问题排查

• 路由模式配置问题：若使用history模式但未配置服务器重定向规则，直接访问子路由或刷新页面时，Vue无法正确解析路由，导致页面渲染失败。可切换为hash模式，或在服务器端配置重定向（如Nginx设置try_files $uri $uri/ /index.html;）。
• publicPath路径错误：在vue.config.js（Vue CLI 3+）或config/index.js（Vue CLI 2）中，publicPath（或assetsPublicPath）配置不符合部署环境。比如部署在子目录下时，需将其设置为子目录路径（如/admin/），而非默认的/，否则资源加载路径错误会导致Vue实例无法正常启动。
• 组件/路由运行时错误：生产环境下Vue会静默处理错误，若组件初始化、路由解析或异步操作时出现报错（如未定义变量、接口请求失败），会导致页面无法渲染。打开浏览器开发者工具（F12）的控制台，查看是否有未捕获的错误信息。
• 挂载目标不存在：检查main.js中的挂载代码（如new Vue({...}).$mount('#app')），确认页面中存在id为app的容器元素，且未被其他代码移除或修改id名称。
• 第三方依赖兼容问题：部分第三方库在生产构建时，可能因压缩、Tree Shaking等处理出现兼容性问题，导致Vue初始化失败。可尝试移除可疑依赖后重新构建，排查问题来源。
• 代码压缩配置问题：若开启了过于激进的代码压缩选项（如terser的某些设置），可能误处理Vue核心代码。可在vue.config.js中调整压缩配置，例如关闭不必要的压缩规则。

内容的提问来源于stack exchange，提问作者Sven