Vue項目兼容IE9(MD.9)

問題: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.在你importvuex的地方導入import "babel-polyfill",注意引入順序,polyfill應當在Vuex前面引入。
3.找到你的webpack的配置文件webpack.base.conf.js(也許你的在其他目錄),總之我們就是想在項目的入口配置裏面加入babel-polyfill,也就是在如下代碼處:
這裏寫圖片描述
配置好entry即可。
4.重新cnpm run dev構建你的項目即可。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章