Vue单页面在ios10系统上出现白屏的bug

一个bug
你用Vue做了一个单页面应用,它在一切设备上都工作正常,但是突然有一天,你的测试和你说,这个网站在iOS 10上跑不起来,怎么办?于是你打开你电脑上的Chrome浏览器,工作正常;打开Safari浏览器,工作正常;打开iOS 11手机,工作正常;打开各种安卓手机,工作正常。但是在iOS 10的手机上,不论是微信浏览器,还是Safari浏览器,都只能看见一个白白的屏幕。于是你把手机连上电脑,在电脑端的Safari里,看到了如下的错误:SyntaxError: Cannot declare a let variable twice: 'e'.
可是你没有写过这样的代码,你怎么可能把一个名为e的变量定义两次?你打开代码,看到了这样美丽的代码:let e = e => {console.log(e);for (let e of [1, 2, 3])console.log(e);
};
虽然这段代码看上去比较奇怪,但是语法上有任何问题吗?哥就愿意定义一个名为e的函数,而这个函数的唯一入参名称也为e,并且哥的for循环体里还愿意再定义一个名称为e的变量,es6的变量作用域允许我们这样做,此e和彼e互不干扰,不对吗?况且很显然,这段代码不是人写的,而是我们在执行npm run build的时候编译产生的。其实我们都没有错,我们也没写错,uglify也没搞错,错的是Safari本身。他们在第十七万一千零四十一号bug中承认了自己的错误:We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter
当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。
看,多么谦逊的态度。所以你也不用太纠结于一个白屏幕,只要找到解决方法就好了。方法其实很简单:进入build文件夹;
找到webpack.prod.conf.js文件;
在UglifyPlugin的定义里添加关于mangle的选项,使它变成下面这个样子:new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false},  mangle: { // 加入这玩意儿即可safari10: true}},sourceMap: config.build.productionSourceMap,parallel: true}),
然后这个世界就太平了。为了避免所有这些不必要的麻烦,我给vue-cli提的一个PR已被接受,在工具里缺省加入了这个选项,这样大家以后就不会遇到这个问题了。关于这个bug的问题描述在这里,解决方案在这里,给vue-cli提的PR在这里,供深挖细掘的人参考。另一个bug
实际上,除此之外,还有另外一个bug也会影响到vue网页在iOS 10上的展现,特别是当你用到广为流传的Swiper插件的时候。这是因为Swiper插件中用到了ES6的语法a = b ** c,a是b的c次方,而iOS 10的Safari里不认识这样的语法,认为这是一个错误,所以你需要让Swiper经过babel的包装,而缺省状态下babel是不对node_modules里的模块进行编译的。相关的issue见这里。解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加如下语句:module.exports = {chainWebpack: config => {config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)}
}
至止为止,通常情况下你的vue网页已经可以完美地在iOS 10上的Safari里展现了。

 

转载于:https://www.cnblogs.com/hjptopshow/p/9848908.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281810.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP/2 规格制定完成

IETF HTTP工作者的负责人Mark Nottingham在其博客上宣布HTTP/2规格制定完成,接下来将是分配RFC编号和正式发表。HTTP是Web的核心技术之一,相比HTTP/1,HTTP/2的改进之处包括更快的页面加载;更长久的连接;服务器推送&…

【习题 6-7 UVA - 804】Petri Net Simulation

【链接】 我是链接,点我呀:) 【题意】 在这里输入题意 【题解】 模拟就好 【代码】 /* 1.Shoud it use long long ? 2.Have you ever test several sample(at least therr) yourself? 3.Can you promise that the solution is right? At least,the main ideal 4.use the p…

easyui combobox java_Easyui的combobox实现动态数据级联效果

实现从数据库中动态获取对应的list集合,并在easyui的combobox中显示出来。实现的效果如下:1、数据库的表设计如图所示2、数据库中填写相关的数据,如图所示。如图所示【法律法规】是所属栏目,因此他的字段parentid是0。【中国公民出…

为什么应该默认将 Class 设为密封类?

前言最近在 dotnet/sdk 上看到一个 Issue,它提出了一个有趣的要求:默认情况下将类设置为密封类(Sealed)?什么是密封类?默认情况下,类是开放的,这意味着它是可以被继承的。例如:class BaseClass …

Spring工具类的使用

2019独角兽企业重金招聘Python工程师标准>>> Spring-core中提供了大量的工具类,常用的有StringUtils、ObjectUtils、NumberUtils、Base64Utils等,Spring工具类在spring-core.jar中的org.springframework.util包下。 org.springframework.util…

python作业高级FTP(第八周)

作业需求: 1. 用户加密认证 2. 多用户同时登陆 3. 每个用户有自己的家目录且只能访问自己的家目录 4. 对用户进行磁盘配额、不同用户配额可不同 5. 用户可以登陆server后,可切换目录 6. 查看当前目录下文件 7. 上传下载文件,保证文件一致性 8…

java用log.i打印数组_java-使用JSCH将ssh日志打印到列表(android)

我一直试图通过将包含我目录名称的log.i字符串值添加到数组中,然后使用数组适配器通过listView打印它们,来在listView中的目录中打印项目.但是,当我尝试运行该应用程序时,它将打印包含目录名称的日志,但不会在listView上打印任何内容.有什么帮助吗?这是我的代码&…

Edge 浏览器被爆存在 XSS 绕过漏洞

来自知名安全测试套件Burp Suite厂商PortSwigger的安全专家Gareth Heyes近日在微软Edge浏览器的内置XSS过滤器存在绕过漏洞,这就意味着尽管微软在Edge浏览器中进行了大量的安全策略部署,但用户浏览网页的时候依然有可能让攻击者通过这种方式在Edge浏览器…

来了!十大更新

面向 Windows 10 正式版用户,微软发布了 2022 年 10 月更新。Windows 10 版本 21H1 更新后操作系统内部版本升级至 Build 190432130/2132(带外更新)。Windows 10 版本 21H2 更新后操作系统内部版本升级至 Build 19044.2130/2132(带…

使用ansible 批量分发SSH Key

先确保你电脑有ansible,我是mac的用brew安装,其他可用yum安装brew search ansiblebrew install ansible我已经安装好2.7了生成下自己的key,一路回车ssh-keygen -t rsa编辑host,添加需要增加ssh key的机器vi /etc/ansible/hosts【hostgroup】我…

使用Git简单笔记

这里只是作为简单的笔记整理,第一次使用的推荐先看一下廖大的教程,内容很多很细,可以边看边练、看不懂的地方先记着、争取七七八八看下来。 心情不佳的分割线 廖雪峰的git教程: https://www.liaoxuefeng.com/wiki/001373951630592…

java中的path类_详谈java中File类getPath()、getAbsolutePath()、getCanonical的区别

简单看一下描述,例子最重要。1、getPath():返回定义时的路径,(就是你写什么路径,他就返回什么路径)2、getAbsolutePath():返回绝对路径,但不会处理“.”和“..”的情况3、getCanonicalPath():返…

部署站点支持Https访问的方法

1、申请公钥和私钥,放到服务器 2、编辑default配置文件 改为 加上证书路径 ps:泛域名支持admin.xxx.com、demo.xxx.com等等,而免费的Lets Encrypt仅支持www.xxx.com和xxx.com 整理自www.laravist.com转载于:https://www.cnblogs.com/lamp01/p/6952464.ht…

.NET Core Onvif协议C#教程系列之XiaoFeng.Onvif组件库

物联网IOT大背景下音视频领域的Onvif 协议在2008年成为全球性的开放接口标准。于是一批开发者涌入该技术领域使用各种编程语言对其改造升级封装。因为是国际标准,所以规范内容比较多,物联网领域涉及又广,所以研究协议是一个很耗时间的一项工作…

php异常处理的深入

引出 如果你调一个类,调用时数据验证时报了个错,你会以什么方式返回 数组,布尔值? 数组这个可以带错误原因回来,那布尔值呢? 返回了个 false, 报错时把错误放在类变量里?还是专门用一个获取错误…

C# 跨平台的支付类库ICanPay

随着微软的开源,越来越多的项目支持跨平台,但是各种支付平台提供的类库,又老又不支持跨平台,吐槽下,尤其是微信,还有好多坑,于是ICanPay诞生了,今天就来讲ICanPay是什么,…

.NET CORE 下收发邮件之 MAILKIT

背景利用代码发送邮件在工作中还是比较常见的,相信大家都用过SmtpClient来处理发送邮件的操作,不过这个类以及被标记已过时,所以介绍一个微软推荐的库MailKit来处理。MailKit开源地址:https://github.com/jstedfast/MailKit需要邮…

【20181026T2】**图【最小瓶颈路+非旋Treap+启发式合并】

题面 【错解】 最大最小?最小生成树嘛 蛤?还要求和? 点分治? 不可做啊 写了个MST暴力LCA,30pts,140多行 事后发现30分是给dijkstra的 woc 【正解】 树上计数问题:①并查集②启发式合并③点分治 …

java实现关键词云_Java synchronized 关键词详细说明

Java synchronized 关键词详细说明外置专业技能点系统进程和进程的定义进程建立方法进程的情况情况变换线程安全的定义synchronized 关键词的几类使用方法装饰非静态数据组员方式synchronized public void sync(){}装饰静态数据组员方式synchronized public static void sync()…

损失函数(Loss function) 和 代价函数(Cost function)

1损失函数和代价函数的区别: 损失函数(Loss function):指单个训练样本进行预测的结果与实际结果的误差。 代价函数(Cost function):整个训练集,所有样本误差总和(所有损失函数总和)的平均值。(这一步体现在propagate()…