VueJS + Vite项目build后preview显示空白加载页求助

先做最基础的定位：打开浏览器开发者工具（F12），切换到控制台和网络标签页，查看是否有报错信息或404请求——这是解决空白页问题的核心第一步。

结合你的vite.config.js，重点排查以下几个方向：

1. 路由模式与base配置不匹配 #

如果项目使用Vue Router的history模式，仅设置base: './'可能导致路由 fallback 失败：

• 解决方案：
  在vite.config.js的preview配置中添加historyApiFallback: true：

  preview: {
    host: 'boodil-pbb.localhost',
    port: 3005,
    historyApiFallback: true
  }
  

  同时确保Vue Router的base配置与Vite的base一致：

  // router/index.js
  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    // ...路由配置
  })
  

2. 资源加载路径错误 #

虽然你设置了base: './'，仍需确认打包后的资源路径是否正确：

• 检查dist目录下的index.html，查看其中引用的JS、CSS文件是否为相对路径（如./assets/index.xxx.js），绝对路径会导致资源加载失败。
• 组件中使用的静态资源（图片、字体等），确保用相对路径或@别名引入，避免使用绝对路径。

3. 自定义元素boodil-widget的加载问题 #

你在Vue编译器中声明了boodil-widget为自定义元素，打包后可能出现以下问题：

• 该自定义元素的脚本是否在打包后正确引入？如果是外部脚本，确保index.html中已正确加载，且加载顺序在Vue脚本之前。
• 查看控制台是否有关于boodil-widget的报错（如未定义、加载失败），这类报错会阻塞Vue页面渲染。

4. 环境变量缺失问题 #

你在define中设置了'process.env': {}，如果项目代码依赖process.env的某个变量（如API地址），打包后会因变量为空导致逻辑报错，进而页面空白：

• 解决方案：
  改用Vite官方的环境变量规范，用import.meta.env替代process.env；如果必须保留process.env，在define中补充需要的变量，例如：

  define: {
    'process.env': {
      VITE_API_URL: JSON.stringify(import.meta.env.VITE_API_URL)
    }
  }
  

5. Vuetify自动导入的潜在问题 #

vuetify({ autoImport: true })在开发中正常，但打包时可能存在样式未正确导入的情况：

• 尝试禁用autoImport，手动导入Vuetify样式测试：

  // src/plugins/vuetify.js
  import 'vuetify/styles'
  import { createVuetify } from 'vuetify'
  export default createVuetify()
  

  同时修改vite.config.js中的Vuetify配置：

  vuetify({
    autoImport: false,
  })
  

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