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']
}

 

 
posted @   zmztyas  阅读(7247)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2016-08-16 c# base和this关键字总结
2016-08-16 c# this关键字的理解
2016-08-16 c# base关键的理解
2016-08-16 深入解析抽象类
2016-08-16 String和string的区别
点击右上角即可分享
微信分享提示