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

问题描述

如下图所示，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’.

Safari10 wap 兼容性问题