Vue 3 & Vite built application shows blank page

user_11735881 0
Viewed 2404

I have a problem trying to make a build of a new Vue3.js + Vite.js application. Once my application is finished i made the npm run build action in order to generate the final deployment files.

Problem is that when I try to see the generated page, it only shows a white page.

enter image description here

Opening the inspection tool I can see how the main generated javascript files are like not being found by the static index.html:

Failed to load resource: net::ERR_FAILED              index.7b66f7af.js:1
vite vuejs3 deployment build javascript
2 Answers

Ok. I found the solution searching a bit, and I see how this problem also occurred actually in Vue 2.

The only thing that you have to do for solvif is add base: './' in your vite.config.js, like this:

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

})

Hope it helps you all!

user_117358810

I had this problem also, and found a solution:

It looks like the awnser given by @javi But it's different. I found out that the situation changes when you deploy your application.

In vite config there is a setting called 'base' filled in like: base: mode === 'production' ? '/nameExample/' : '/', this will put the output of your project on the endpoint : 'nameExample'. If you go in production this fails and shows a blank page, and you need to changes this nameExample to '/' to show the projectbuild online. But than it shows a blank page in development because it mismatches the name of the project. Hope this will help you.

user_176651720
Related