详解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 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
Javascript实现基本运算器
Jul 15 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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
介绍几个array库的新函数 php
2006/12/29 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Django框架models使用group by详解
2020/03/11 Python
深入理解Python 多线程
2020/06/16 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
幼儿园小班评语大全
2014/04/17 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
焦裕禄观后感
2015/06/03 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python