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.在你import
過vuex
的地方匯入import "babel-polyfill"
,注意引入順序,polyfill應當在Vuex前面引入。
3.找到你的webpack的配置檔案webpack.base.conf.js
配置好entry即可。
4.重新
cnpm run dev
構建你的專案即可。
有一個事實我得講一下,關於上面polyfill的用法,上面的4步中的2,3其實只要你完成第三步就可以了(如果你的專案是利用webpack構建的),你可以跳過第二步。之所以都寫出來,是想提高解決問題的可能性。當你急的跳腳在網上尋找答案時,如果嘗試了卻發現沒有起作用的時候,八成會咒罵我的,所以把所有可能性考慮進去了然後提出了這個有“重複之嫌”的解決方案,我祝你編碼開心!