問題描述
如下圖所示，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 兼容性問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/343164.html
標籤：其他
下一篇：網路加載框架Retrofit