Explanation of the causes and solutions to the problem of white screen on Vue's first screen

The reasons for the vue first screen white screen are roughly as follows:

1. Routing mode error (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 history requires backend cooperation

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

(3) The first normal access is available. After refreshing, the white screen is white. Vuex is not combined with local storage, which causes data loss after refreshing.

2. File reference path error in dist (path problem with vue project packaging)

The file reference path in the packaged dist directory is incorrect, and the error is reported due to the failure to find the file, resulting in a white screen

Solution: publicPath: ''./"

3. The browser does not support es6

The es6 syntax is used in the project. Some browsers do not support es6, which causes compilation errors to fail to parse and cause white screen

Solution:

Install Babel, which translates these new syntaxes into lower versions of code.

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

4. Loading file resources are too large

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

Solution:

Lazy loading of routes, lazy loading of components

Lazy route loading

// 1. Vue asynchronous component technology:{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/'], resolve)
}
// 2. Import() of es6 proposal{
  path: '/',
  name: 'home',
  component: () => import('../views/')
}
// 3. () provided by webpack{
  path: '/home',
  name: 'Home',
  component: r => ([],() =>  r(require('../views/')), 'home')
}

Lazy component loading

// import methodcomponents:{
  "dailyModal":()=>import("./")
},
// require methodcomponents:{
  "dailyModal":resolve=>require(['./'],resolve)
},

This is the article about the reasons and solutions to the problem of Vue’s first screen white screen problem. For more related content on Vue’s first screen white screen, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!