iOS 10的兩個坑

iOS 10出現白屏幕，其他機型不會。

一個bug

手機連上電腦，在電腦端的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);
};

況且很顯然，這段代碼不是人寫的，而是我們在執行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循環迭代變量時，我們錯誤地認為這是一個語法錯誤。）

 

1. 進入build文件夾；

2. 找到webpack.prod.conf.js文件；

3. 在UglifyPlugin的定義里添加關於mangle的選項，使它變成下面這個樣子：

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

其實我們建議Vue官方在vue-cli工具里缺省加入這個選項，以避免大家的麻煩。

另一個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)\/.*/)
  }
}