vue 解决IOS10低版本白屏的问题


Posted in Javascript onNovember 17, 2020

新公司是做自己的独立产品,比之前呆过的外包公司要求严格的多,注重用户体验,以下是在新项目里进行前端优化的一些操作

一,低版本空白屏问题,以及ios8的样式问题

本项目是通过vue-cli搭建,上线以后运行在新版本的苹果手机和安卓手机上均无问题。但是在ios8 9上出现了空白屏的原理,经过测试以后发现是低版本不兼容es6的语法,经过几番尝试找到了最优解。

1 空白屏问题

首先安装babel-polyfill,安装命令:npm install --save-dev babel-polyfill

安装成功后找到webpack.base.conf里把第16行的代码换成第17行的写法,如图1所示

vue 解决IOS10低版本白屏的问题

相同的页面,加入红色方框里的代码,如图2所示

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "babel-loader"
  },

vue 解决IOS10低版本白屏的问题

2 样式问题

找到webpack.prod.conf文件,将注释代码替换成红色方框内的代码即可,如图3

vue 解决IOS10低版本白屏的问题

二 打包之后的文件以及生成的vendor文件过大的问题

1打包文件过大的问题

找到config底下的index.js文件,在69行的代码productionSourceMap:true,将true改为false。不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。但是这里为了瘦身大业,可以舍去。

2生成的vendor文件过大的问题

vendor文件里会将项目中vue vue-router mint-ui element-ui等库和框架一起打包压缩,这样必定会占用空间,造成压缩包过大。通常都有好几百k至少超过1M,在加载页面的时候会极度耗时。

这里建议使用cdn 然后在build里找到webpack.base.conf,加入平常不改动的库,如图4所示,然后在入口页面index.html导入相应的cdn

vue 解决IOS10低版本白屏的问题

同时要在项目里把诸如图5这样的导入都去除,否则打包的时候依然会占用空间,我项目里这样优化之后,vendor大小由239k优化到10k,减小的20倍

vue 解决IOS10低版本白屏的问题

三 压缩图片 ,推荐一个压缩图片的工具 https://tinypng.com/

如果有更改好的工具可以留言告知~

补充知识:vue-cli构建的移动端项目ios9以下打开页面空白问题

造成ios9一下页面空白问题,个人遇到的是项目npm run build之后,项目里es6没有转成es5造成的。

vue-cli构建的本身已经配置好babel,es6的转码,但是还遇到这个问题。

那么可能的原因是引入的文件没有转码,像我个人把http.js写在了static/js/http.js里了。 在static这个文件夹下。项目编译这个文件本身不打包。所有写在这里的es6没有转成es5.

所有要把js文件移入src下的assets,或者自建的文件夹

ios9以下页面空白如果是其他方面引起的可以考虑在pc端IE浏览器的Edge调试。把错误都排除了,能够页面显示出来,那么基本就成功了。

IE会报vuex requires a Promise polyfill in this browser这个错误,成这种现象的原因归根究底就是浏览器对ES6中的promise无法支持,因此需要通过引入babel-polyfill来是我们的浏览器正常使用es6的功能

解决办法:安装babel-polyfill这个依赖 cnpm install ?save-dev babel-polyfill

然后在build下的webpack.base.conf.js文件中,使用

const webpackConfig = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: ["babel-polyfill", "./src/main.js"]
 }

以上这篇vue 解决IOS10低版本白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 #Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 #Javascript
vue的webcamjs集成方式
Nov 16 #Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 #Javascript
详解JavaScript原型与原型链
Nov 16 #Javascript
详解JavaScript执行模型
Nov 16 #Javascript
You might like
php的header和asp中的redirect比较
2006/10/09 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php统计数组元素个数的方法
2015/07/02 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
jQuery live
2009/05/15 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
详解vue 组件
2020/06/11 Javascript
详解javascript void(0)
2020/07/13 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
详解Python3的TFTP文件传输
2018/06/26 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python 装饰器的使用示例
2020/10/10 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
研发工程师的岗位职责
2013/11/18 职场文书
思想汇报格式
2014/01/05 职场文书
宣传普通话标语
2014/06/27 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
单位委托书格式范本
2014/09/29 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
python可视化之颜色映射详解
2021/09/15 Python