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 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue router 源码概览案例分析
Oct 09 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
应付会计岗位职责
2013/12/12 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
2014年民警工作总结
2014/11/25 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书