详解vue 项目白屏解决方案


Posted in Javascript onOctober 31, 2018

在做的项目是使用 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: ['babel-polyfill', './src/main.js']

使得其从入口文件就开始转换代码。

做了上面的操作后,问题就解决了,因此没有对 3 进行实践。

3 的情况,是以前的经验之谈。部分用户出现了打不开页面的情况,刚好同事的手机也遇到同样的情况,拿来分析之后发现,是运营商劫持了流量,往里面塞了广告 js ,结果它的服务器还出错.....解决方案是上 https ,完美解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jquery validate demo 基础
Oct 29 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
微信小程序ibeacon三点定位详解
Oct 31 #Javascript
小程序获取周围IBeacon设备的方法
Oct 31 #Javascript
详解js删除数组中的指定元素
Oct 31 #Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 #Javascript
Vue项目History模式404问题解决方法
Oct 31 #Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 #Javascript
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
You might like
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php绘制圆形的方法
2015/01/24 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
javascript 事件绑定问题
2011/01/01 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python中元类用法实例
2014/10/10 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python字符串三种格式化输出
2020/09/17 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
出国签证在职证明
2014/01/16 职场文书
高中生的自我评价
2014/03/04 职场文书
整改报告格式
2014/11/06 职场文书
热血教师观后感
2015/06/10 职场文书