VUE2在UC,Quark等浏览器出现白屏
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE2在UC,Quark等浏览器出现白屏相关的知识,希望对你有一定的参考价值。
参考技术A 上网搜了一大堆,但也没有解决问题参考了别人的UC开发调试:
费了好大劲终于在PC上的chrome实现了调试,然而在chrome上面也白屏,排除了原因,就是你需要:番羽,土墙。
当我终于能调试的时候,发现页面跑通了,打开调试就跑通,关掉仍旧不行,这不存心捣乱?
重复了几次,在控制台上发现了一个报错信息,是webpack的
没办法,只能冲着这货下手,不用webpack当服务器了
npm run build 之后,用broswer-sync来访问,,,,终于跑通了
#总结
UC(android V11.4) 版本浏览vue-cli(webpack)脚手架的应用,就出现白屏,我也不知道这是谁的锅,说是UC吧,
iPhone端的UC没有问题,是webpack吧,那其他浏览器(如微信,QQ,小米浏览器)都没问题。
嘛,算了算了。
//细节待补充,先马克
vue 项目白屏解决方案
在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的。在某次更新功能代码后,被反馈在一些手机上会出现白屏。经过一番探索,多管齐下解决了问题
白屏可能的原因:
- es6 代码没有被编译成 es5 ;
- 文件打包路径错误;
- 运营商塞入的广告 js 服务器报错,连累项目不能下载资源;
针对 1 和 2 ,分别采取以下做法:
解决位置:config/index.js 文件:把 assetsPublicPath: ‘/‘ 改为assetsPublicPath: ‘./‘
build: {
assetsPublicPath: ‘./‘,
}
解决位置:
首先安装 babel-polyfill 库;
npm install --save babel-polyfill
然后修改 build/webpack.base.conf.js 文件,将
entry: {
app: ‘./src/main.js‘,
}
改成
entry: {
app: ["babel-polyfill", "./src/main.js"]
}
使得其从入口文件就开始转换代码。
做了上面的操作后,问题就解决了,因此没有对 3 进行实践。
3 的情况,是身边同事的经验之谈。部分用户出现了打不开页面的情况,刚好同事的手机也遇到同样的情况,拿来分析之后发现,是运营商劫持了流量,往里面塞了广告 js ,结果它的服务器还出错.....解决方案是上 https ,完美解决。
来源:https://segmentfault.com/a/1190000016853748
以上是关于VUE2在UC,Quark等浏览器出现白屏的主要内容,如果未能解决你的问题,请参考以下文章
vue2的应用无法再UC浏览器打开,只显示白屏,请问怎么回事
vue2.0 在华为手机自带浏览器和UC浏览器打开白屏的问题
vue2.0在android5.0白屏, es6转es5保证浏览器兼容性