Vue 3 和 Vite 构建的应用程序显示空白页面

Question

我在尝试构建新的 Vue3.js + Vite.js 应用程序时遇到问题。我的申请完成后，我做了npm run build行动来生成最终的部署文件。

问题是，当我尝试查看生成的页面时，它只显示一个白色页面。

打开检查工具，我可以看到主要生成的 javascript 文件如何没有被静态 index.html 找到：

Failed to load resource: net::ERR_FAILED              index.7b66f7af.js:1 

Answer 1

好的。我搜索了一下找到了解决方案，我发现这个问题实际上也出现在 Vue 2 中。

对于 solvif ，您唯一要做的就是添加base: './'到您的 中vite.config.js，如下所示：

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from '@vuetify/vite-plugin'

const path = require('path')

export default defineConfig({
  plugins: [
    vue(),

    vuetify({
      autoImport: true,
    }),
  ],
  define: {
    'process.env': {}
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  base: './',

})

希望对大家有所帮助！