There are probably the following reasons for the Vue first screen white screen:

1. The routing mode is wrong (the routing is repeated or no routing is configured)

(1) Since the routing mode mode is set to history, the default is hash

Solution: Change the mode to hash mode, or directly delete the mode configuration, and the history needs the cooperation of the backend

(2) When doing dynamic routing, the white screen caused by the difference between next() release and next(...to, replace) is essentially routing duplication

(3) The first normal access, a white screen after refreshing, vuex is not combined with local storage, resulting in data loss after refreshing

2. The file reference path in dist is wrong (the path problem of vue project packaging)

The file reference path in the packaged dist directory is incorrect, and an error is reported because the file cannot be found, resulting in a white screen

Solution: publicPath in vue.config.js: ''./"

3. The browser does not support es6

The es6 syntax is used in the project, some browsers do not support es6, resulting in compilation errors that cannot be parsed and cause a white screen

Solution:
Install Babel, which will transpile these new syntaxes into lower versions of the code.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

4. The resource of the loaded file is too large

The html of a single-page application is generated by js, because the first screen needs to load a large js file (app.js and vendor.js), so when the network speed is poor, a certain degree of white screen will be generated

Solution:

Lazy loading of routes, lazy loading of components

Routing lazy loading

// 1、Vue异步组件技术：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}
 
// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}
 
// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}

Component lazy loading

// import 方式
components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
// require 方式
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},

Vue first screen white screen reasons and solutions