javascriptdeploymentbuildvuejs3vite

Vue 3 & Vite built application shows blank page


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 

Solution

  • 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!