問題:Vue項目用了axios,vuex以及ES6語法等一系列看起來很高大上的新技術後,在IE9-11瀏覽器直接白屏。
原因:IE對ES6語法支持極差,IE也不支持promise,vuex,axios都依賴promise特性。
解決方案:
1.首先解決es6語法不兼容的問題,用babel
轉換成es5(不是es2015),執行安裝命令
cnpm install --save-dev babel-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
(也許你的在其他目錄),總之我們就是想在項目的入口配置裏面加入babel-polyfill,也就是在如下代碼處:
配置好entry即可。
4.重新cnpm run dev
構建你的項目即可。
有一個事實我得講一下,關於上面polyfill的用法,上面的4步中的2,3其實只要你完成第三步就可以了(如果你的項目是利用webpack構建的),你可以跳過第二步。之所以都寫出來,是想提高解決問題的可能性。當你急的跳腳在網上尋找答案時,如果嘗試了卻發現沒有起作用的時候,八成會咒罵我的,所以把所有可能性考慮進去了然後提出了這個有“重複之嫌”的解決方案,我祝你編碼開心!