Vue 3 & Vite built application shows blank page

Question

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.

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 

Answer 1

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!

Answer 2

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.

Answer 3

You cannot run a Vite project by opening index.html by hand. You can see that the file path is currently in the webbrowsers url bar. Vite only allows the accesss to the required JavaScript files via http:// or https://. (or some other defined protocols).

If you still call the index.html via file:// you will get an CORS error or file not found error.

Try to deploy your vite builds on a webserver which can be accessed via http/s.

Example error when accessing react app via file://