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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
jquery实现心算练习代码
Dec 06 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Axios学习笔记之使用方法教程
Jul 21 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
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
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
PHP学习之正则表达式
2011/04/17 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
ThinkPHP安装和设置
2015/07/27 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP链表操作简单示例
2016/10/15 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python移位运算的实现
2019/07/15 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
5款实用的python 工具推荐
2020/10/13 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
服务质量承诺书
2014/03/27 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
tomcat下部署jenkins的方法
2022/05/06 Servers