關於處理移動端Vue單頁面及其內嵌相容問題

question:由於最近轉移了以前的H5專案，重構使用Vue單頁面，導致部分手機內嵌或在微信瀏覽器中無法瀏覽，或者無法使用ajax請求；手機機型千變萬化，系統版本也各種各樣，通宵優化上線後成功處理問題 ，也只是相容大部分主流手機，雖然解決方案並不是很突出，但是查詢問題的路太痛苦了

1. 首先需要解決低版本系統的移動端無法渲染頁面，因為低版本瀏覽器只支援ES5語法，而我在寫單頁面時基本都使用了ES6語法，所以首先需要全域性把ES6語法轉換為ES5語法

   這裡引用了 babel-polyfill，可以處理使ES6語法轉換成ES5語法；

   還有es6-promise

   ，可以處理在低版本中使用Promise，相關ES6 Promise可查詢資料 ；

   1.1 安裝外掛babel-polyfill和es6-promise:npm i babel-polyfill es6-promise --save

   1.2 在main.js檔案中新增以下程式碼：

   import 'babel-polyfill'
   import Vue from 'vue'
   import Es6Promise from 'es6-promise'
   Es6Promise.polyfill()

   1.3 最後在 build/webpack.base.conf.js 檔案中配置：

   module.exports = {
    ...
        entry: {
        app: ["babel-polyfill", "./src/main.js"]
        }
        ...
   }
    
   

   1.4 有可能這時run會報錯，需要停止重新執行一下

2. 在第1步完成時有可能打包後低版本頁面展示還是空白，這時檢測一下引用的元件是否使用ES6語法的元件(十幾個元件一個個排除真是比較痛苦)，babel-polyfill在預設狀態下不對node_modules裡的模組進行編譯的，而這裡我使用了js-pinyin第三方元件，這個元件在npmjs中標記ES6，只好去掉並讓介面處理漢字轉拼音了，頁面修改了下，打包後終於好了！

3. 頁面正常了，這時在IOS9上ajax請求出問題了(還有vivo 5.x android版本系統及其他)，讓移動端監測拿錯誤日誌看到的結果，分析由於使用了axios，而axios

   的github上很明確的標註了

不支援IOS9、IOS10.0，從10.11開始支援，解決方式就是我這邊之前引用了jquery（其實不應該引用jquery），使用jquery的ajax來調，搞定

1. 其他解決：

   4.1 webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下 開啟為白屏，版本太高了，當時裝的時候就按照最新的裝了，這裡制定下webpack-dev-server 的版本：npm install --save-dev [email protected]

   4.2 在IOS 10上有可能白屏，這裡 build/webpack.prod.conf.js

   找到這塊程式碼，在compress後方新增mangle的配置

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

總結下：使用第三方元件一定要排查相容性，自己踩的坑含著淚也要填成堆