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

})

希望对大家有所帮助！

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

Vue 3 & Vite built application shows blank page

javascript

deployment

build

vuejs3

vite