详解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 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
json跟xml的对比分析
Jun 10 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
Vuex实现购物车小功能
Aug 17 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自动跳转中英文页面
2008/07/29 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
js获取div高度的代码
2008/08/09 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
nodejs基础应用
2017/02/03 NodeJs
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
python中nan与inf转为特定数字方法示例
2017/05/11 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python中static相关知识小结
2018/01/02 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
神路信息Java面试题目
2013/03/31 面试题
工作自我评价怎么写
2014/01/29 职场文书
ktv好的活动方案
2014/08/15 职场文书
股指期货心得体会
2014/09/13 职场文书
安全承诺书
2015/01/19 职场文书
学生检讨书范文
2015/01/27 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL