Vue3 + Vite项目执行npm run build构建后页面空白求助

以下是几个常见的排查和解决方向：

• 路由模式不匹配
  如果项目使用了Vue Router且配置为history模式，仅设置base: './'可能无法正常工作。可尝试两种方案：

  1. 将路由模式改为hash模式：

     const router = createRouter({
       history: createWebHashHistory(),
       routes: [...]
     })
     

  2. 若坚持使用history模式，需确保base配置与部署路径一致，同时服务器端要配置 fallback 指向index.html。

• 修正process.env的定义
  你在vite.config.js中定义了'process.env': {}，这会清空所有环境变量，可能导致依赖库或项目代码中依赖process.env的逻辑出错。建议移除该配置，Vite中推荐使用import.meta.env访问环境变量；若需兼容process.env，可改为：

  define: {
    'process.env': process.env
  }
  

• 验证资源引用路径
  构建完成后打开dist/index.html，检查其中的JS、CSS资源路径是否为相对路径（以./开头）。若路径不正确，确认vite.config.js中的base配置是否生效，也可尝试将base设置为具体部署路径（比如/project-name/）。

• 查看控制台报错
  在空白页面按F12打开开发者工具，查看控制台的报错信息（如资源加载失败、JS语法错误等），这些信息可直接定位问题。

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