vue-cli3 ios10白屏問題解決思路

在出現了這個問題之后先不要盲目的去瞎試，根據網上的方法試了個遍也沒解決問題

先看報的是什么錯，再針對的解決問題

首先出現的報錯是 SyntaxError: Unexpected token '*'  在打包后的dist文件里搜了下連乘 ** 果然有，說明沒有轉編譯成功

這個錯誤的出現是由於 ios10 是不支持連乘引起的，如果發現自己的代碼里有這個的使用，那最好換下，或者轉編譯

這次遇到的是自己代碼里沒寫，找了半天原來是swiper引起的，那看看能怎么解決。

搜了下發現無非就幾種方法：

https://github.com/surmon-china/vue-awesome-swiper/issues/220

1. 用babel-plugin-transform-exponentiation-operator等類似工具轉編譯，於是試了幾種babel包工具，並沒有生效還是報這個錯

 

2. 在配置文件里把swiper包包含進去

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

 

but ... 這種方式看似生效，倒是沒報SyntaxError: Unexpected token '*' 這個錯了，但貌似引起了其他問題 

開啟新一輪的報錯

SyntaxError: Unexpected token '...'. Expected a property name.

打包后的**連乘符號沒有了，但是es6的...擴展運算符本來之前編譯成功了的，這時候卻失敗了

然后說是安裝babel轉編譯插件。。也都完全沒有成功

 

3. swiper已經是最新版的4.x的了，最終的解決方式是吧swiper卸載，改用vue-awesome-swiper 雖然這個也是在swiper的基礎上寫的插件。但是換這個之后就沒報錯了，估計是在這個里面解決了這個錯誤。

 

 

swiper的問題解決完之后，又發現新報錯😢

ReferenceError: Can't find variable: URLSearchParams

這個的原因是因為ios10 並不支持這個語法😭

解決方法：

先安裝

npm install url-search-params-polyfill --save

再在使用的時候引入

require('url-search-params-polyfill');     // 或者
import 'url-search-params-polyfill'

 

至此，終於解決，其間走了好多彎路，拖了兩三天才解決。

調試可以mac連真機 safari 調試，可以看到打印出來的錯誤，當然，如果沒有相應版本的真機，建議用模擬器，mac上xcode 帶ios simulator， 

當然一般現在已經沒有帶ios10版本了，需要下載相應版本的 component 

打開xcode > Behaviors > Edit Behaviors > Component > 選擇需要的 Simulator版本下載並安裝