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 

Target

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!

Target

Not sure how this may help since there was no code initially. – Jointer

Yep, all good now. – Jointer

hello I added the base, but the page still produces white screen – Catechist

Answer 2

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://

Manifold

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bastion

Answer 3

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.

Whistle

Please use the proper formatting for code part. – Skier

Answer 4

Go through below link for details:

https://vue-land.github.io/faq/blank-page-in-production#:~:text=You%20need%20to%20run%20vite,wrong%20with%20a%20production%20environment.

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // base: './',         // works, but can clash with createWebHistory
  // base: '/',          // if the app is in root directory
  base: '/webamy-app/',  // if the app is in sub path
})

index.js

...
const router = createRouter({
    // history: createWebHistory(),
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
})

If your site is deployed to https://example.com/webamy-app/ Just type as below in Web URL (exclude index.html)

https://example.com/webamy-app/

If your app is in the root path:

https://example.com/

Tippets

Answer 5

instead of base: './', try base: '/'

Retroactive