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里展現了。

?