javascript - 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，您唯一需要做的就是在 vite.config.js 中添加 base: './'，如下所示:

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: './',

})

希望对大家有帮助!