前端早讀課公眾號，2018年2月7日內容，認為其很有意義，記錄於此

用vue框架開發的SPA在所有的環境下都可以正常顯示，除了在ios10的手機上跑不起來，無論是微信瀏覽器還是Safari瀏覽器，都只能看到一個白白的螢幕。

手機連線電腦後，在電腦端的Safari裡，報錯如下：

SyntaxError: Cannot declare a let variable twice: ‘e’.

但事實上，並沒有寫過這樣的程式碼，而webpack編譯後的語句是這樣的：

let e = e => {
    console.log(e);
    for (let e of [1, 2
 
, 3])
        console.log(e);
};

這段語法，在es6的標準中是沒有錯的，但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檔案
• 在UglifyJsPlugin的定義裡新增關於mangle的選項，如下:

new UglifyJsPlugin({
   uglifyOptions: {
     compress: {
       warnings: false
     },
     mangle: {
       safari10: true
     }
   },
   sourceMap: config.build.productionSourceMap,
   parallel: true
 }),

another bug
有另外一個bug也會影響到vue網頁在iOS 10上的展現，特別是當你用到廣為流傳的Swiper外掛的時候。這是因為Swiper外掛中用到了ES6的語法a = b c，a是b的c次方，而iOS 10的Safari裡不認識這樣的語法，認為這是一個錯誤，所以你需要讓Swiper經過babel的包裝，而預設狀態下babel是不對node_modules裡的模組進行編譯的。

解決方法：
在專案根目錄下新建一個檔案vue.config.js，在裡面新增如下語句：

module.exports = {
  chainWebpack: config => {
    config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
  }
}

至此全部解決。

再次感謝前端早讀課這個優秀的公眾號