Vue项目执行npm run build后出现空白页，请求解决方法

核心修复步骤 #

1. 修正vue.config.js的publicPath配置
   当通过file://协议直接打开本地静态文件时，必须配置相对路径：

   module.exports = {
     publicPath: './'
   }
   

   修改后重新执行npm run build，再打开dist目录下的index.html。

2. 调整Vue Router的路由模式
   默认的history模式依赖服务器URL重写，完全不兼容file://协议，需切换为hash模式：

   const router = new VueRouter({
     mode: 'hash',
     routes: [/* 你的路由配置 */]
   })
   

额外检查项 #

• 检查dist目录结构：确认js、css、图片等静态资源都正确生成在dist目录下，没有路径层级错误
• 查看浏览器控制台：按F12打开控制台，检查是否有404资源加载错误，这是定位路径问题的关键
• 路由跳转逻辑：检查signin路由的跳转代码，避免硬编码绝对路径，确保使用router.push('signin')或router.push('/signin')（hash模式下会自动转为/#/signin）
• 验证build命令：查看package.json中的build命令，确认是vue-cli-service build，无错误参数

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