1. 程式人生 > >Vue專案相容IE9以及ES6語法轉換(MD.9)

Vue專案相容IE9以及ES6語法轉換(MD.9)

問題:Vue專案用了axios,vuex以及ES6語法等一系列看起來很高大上的新技術後,在IE9-11瀏覽器直接白屏。
這裡寫圖片描述
原因:IE對ES6語法支援極差,IE也不支援promise,vuex,axios都依賴promise。
解決方案:
1.首先解決es6語法不相容的問題,用bable轉換成es5(不是es2015),執行安裝命令
cnpm install --save-dev bable-cli
bable全家桶就裝上去了。注意啊,大部分Vue專案其實都安裝過這個外掛,如果有就不必重複安裝了。
2.在專案裡找到你的.babelrc檔案,沒有就新建一個。
這裡寫圖片描述
3.安裝ES6轉換ES5規則,執行命令列,很多規則集,我安裝的這個。
cnpm install --save-dev babel-preset-es2015


4.在bable檔案寫好配置,具體如下:

{
    "presets": [
      "es2015"
    ],
    "plugins": []
  }

以上4步搞定ES6語法相容問題。
接下來就是對promise的相容問題了,解決方案是安裝poly-fill外掛,四步走吧。
1.命令列輸入cnpm install babel-polyfill --save-dev安裝外掛
2.在你importvuex的地方匯入import "babel-polyfill",注意引入順序,polyfill應當在Vuex前面引入。
3.找到你的webpack的配置檔案webpack.base.conf.js

(也許你的在其他目錄),總之我們就是想在專案的入口配置裡面加入babel-polyfill,也就是在如下程式碼處:
這裡寫圖片描述
配置好entry即可。
4.重新cnpm run dev構建你的專案即可。

有一個事實我得講一下,關於上面polyfill的用法,上面的4步中的2,3其實只要你完成第三步就可以了(如果你的專案是利用webpack構建的),你可以跳過第二步。之所以都寫出來,是想提高解決問題的可能性。當你急的跳腳在網上尋找答案時,如果嘗試了卻發現沒有起作用的時候,八成會咒罵我的,所以把所有可能性考慮進去了然後提出了這個有“重複之嫌”的解決方案,我祝你編碼開心!