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 脚手架为基础的,只能使用微信浏览器打开的。在某次更新功能代码后,被反馈在一些手机上会出现白屏。经过一番探索,多管齐下解决了问题

白屏可能的原因:

  1. es6 代码没有被编译成 es5 ;
  2. 文件打包路径错误;
  3. 运营商塞入的广告 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保证浏览器兼容性

Chrome主页Google搜索被改为Bing怎么办

网页无法观看视频,点击观看会变成白屏,并且右边和下边会有跳线

HTML5手机端页面跳转,会出现短暂白屏问题,如何解决?求大牛解决