解决Vue项目在iOS 10 报错 “Cannot declare a let variable twice: ‘r‘”

问题描述

如下图所示,H5页面在iPhone7P及IPhone5c(iOS 10)手机上打开白屏,使用vconsole查看报错原因是Cannot declare a let variable twice: 'r'
解决Vue项目在iOS 10 报错 “Cannot declare a let variable twice: ‘r‘”

问题定位

原因是由于ios10的bug,按报错的描述来看原因是“变量不能被let声明两次”,但其实仔细review代码,并没有出现这种情况。

尝试一

一开始想到的最简单的方式,就是找到对应的模块,将所有的let修改为var,但是没有起作用。

尝试二

按照网上的解决方案,修改webpack的配置,引入uglifyjs-webpack-plugin,但还是不生效

尝试三

博主的项目,vue-cli版本是3.3.0,webpack的版本是4.41.4,在尝试修改uglifyPlugin不生效后,以为是webpack版本原因,需要使用terser-webpack-plugin,结果发现还是不生效,并且使用vue inspect查看项目最终生成的webpack配置,terserPlugin 确实有修改成功

尝试四

反复尝试网上的方案,修改配置无果后,博主想到之前也解决过iOS9白屏的问题,或许这两个报错的根本原因都是一样的,由于引入的库中的es6的语法所引起的。于是一点点定位导致报错的代码,发现确实是由于引入的地图库导致的,于是按照之前的解法,配置transpileDependencies,将引入的库进行babel显示转译。一行配置,问题迎刃而解!!!

具体解决方案

vue.config.js里面配置

  transpileDependencies: [
   /[/\\]node_modules[/\\](.+?)?依赖库的名称/
 ],

根本原因还是在于依赖库里面出现了iOS10不支持的语法形式,所以需要对其进行转义

参考

解决Vue项目在iOS 9 报错 “SyntaxError: Unexpected keyword ‘const‘. Const…”

ios10兼容问题: Cannot declare a let variable twice: ‘e’.

Safari10 wap 兼容性问题

上一篇:控制文件与数据文件头SCN不一致导致数据库无法启动故障处理 Fuzzy scn


下一篇:C++编译期分支选择相关技术