问题描述
如下图所示,H5页面在iPhone7P及IPhone5c(iOS 10)手机上打开白屏,使用vconsole查看报错原因是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’.