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 会把这些新语法转译成较低版本的代码。 或者是配置对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"] } };   npm install --save-dev @babel/core @babel/cli @babel/preset-env

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

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

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

解决：需要配置vue.config.js文件 module.exports = { transpileDependencies: ['vuex-persist'] }  

标签：vue,babel,汇总,js,白屏,vuex,路由
来源： https://www.cnblogs.com/zmztya/p/16591714.html