vue 白屏问题汇总及解决方案

常见的出现白屏的原因有哪些

1. vue项目打包的路径问题

     解决： vue.config.js中 publicPath: ''./"

2. 路由重复或者没有配置路由

   （1）由于把路由模式mode设置成history了，默认是hash

         解决：将模式改为hash模式，或者直接把模式配置删除，而且history需要后端配合

   （2）做动态路由时，next（）放行与next(...to, replace)区别造成的白屏，实质是路由重复

   （3）第一次正常访问，刷新后白屏，vuex没有与本地存储结合，刷新后导致数据丢失

3. 项目中使用了es6的语法，一些浏览器不支持es6

（该问题也可以说ie对promise的支持不太好）

     解决：安装Babel ，Babel 会把这些新语法转译成较低版本的代码。

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

或者是配置对promise的支持信息
main.js
  import 'babel-polyfill'
  import Es6Promise from 'es6-promise'
  Es6Promise.polyfill()
  
webpack.base.conf.js
   module.exports = {
     entry: {
     app: ["babel-polyfill", "./src/main.js"]
     }
  };

 

4. vue首屏白屏问题加载js文件过大，通过打包优化，加快首屏页面打开速度

      解决： 可以通过Gzip, CND，路由懒加载等方式

5.ios9.3手机上项目空白，原因来自mac上的safari浏览器显示第三方插件 vuex-persist

      解决：需要配置vue.config.js文件

module.exports = {
  transpileDependencies: ['vuex-persist']
}