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裏展示了。