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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
javascript编程起步(第三课)
Feb 27 Javascript
JS动画效果代码3
Apr 03 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
php 修改密码实现代码
May 24 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP Reflection API详解
2015/05/12 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
python关闭windows进程的方法
2015/04/18 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python Selenium参数配置方法解析
2020/01/19 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python中pop()函数的语法与实例
2020/12/01 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
文秘专业自荐信
2013/10/14 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js