Causas y soluciones de la pantalla blanca de la primera pantalla de Vue

Probablemente haya las siguientes razones para la pantalla blanca de la primera pantalla de Vue:

1. El modo de enrutamiento es incorrecto (el enrutamiento se repite o no se configura ningún enrutamiento)

   (1) Dado que el modo de enrutamiento está configurado en historial, el valor predeterminado es hash

         Solución: cambie el modo al modo hash, o elimine directamente la configuración del modo, y el historial necesita la cooperación del backend

   (2) Al realizar el enrutamiento dinámico, la pantalla blanca causada por la diferencia entre la liberación next() y next(...to, replace) es esencialmente una duplicación de enrutamiento

   (3) El primer acceso normal, una pantalla blanca después de actualizar, vuex no se combina con el almacenamiento local, lo que provoca la pérdida de datos después de actualizar

2. La ruta de referencia del archivo en dist es incorrecta (el problema de la ruta del paquete del proyecto vue)

La ruta de referencia del archivo en el directorio dist empaquetado es incorrecta y se informa un error porque no se puede encontrar el archivo, lo que genera una pantalla en blanco

Solución: publicPath en vue.config.js: ''./"

3. El navegador no es compatible con es6

La sintaxis es6 se usa en el proyecto, algunos navegadores no son compatibles con es6, lo que genera errores de compilación que no se pueden analizar y provocan una pantalla en blanco

Solución:
Instale Babel, que transpilará estas nuevas sintaxis en versiones inferiores del código.

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

4. El recurso del archivo cargado es demasiado grande

El html de una aplicación de una sola página es generado por js, porque la primera pantalla necesita cargar un archivo js grande (app.js y vendor.js), por lo que cuando la velocidad de la red es baja, se verá un cierto grado de pantalla en blanco. generado

Solución:

Lazy loading de rutas, lazy loading de componentes

Enrutamiento de carga diferida

// 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')
}
 

 Carga diferida de componentes

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