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构建的),你可以跳过第二步。之所以都写出来,是想提高解决问题的可能性。当你急的跳脚在网上寻找答案时,如果尝试了却发现没有起作用的时候,八成会咒骂我的,所以把所有可能性考虑进去了然后提出了这个有“重复之嫌”的解决方案,我祝你编码开心!

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