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'] }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.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的区别