前言
在實際工作過程中，用到了Vue和iView。但是遇到了在ie11中不兼容的問題竖独，經(jīng)過網(wǎng)上多方的查詢，終于收集了一套完整的解決方案挤牛，下面將它分享出來莹痢。
正文
解決ie不支持es6語法問題
在使用vue-cli搭建Vue的當(dāng)頁面項目時，會自動幫你安裝包babel相關(guān)的組件墓赴。babel的作用是將ES6+的語法轉(zhuǎn)換為ES5的語法竞膳，這樣就能保證被瀏覽器兼容（沒錯，說的就是IE11）诫硕。
但是這還遠(yuǎn)遠(yuǎn)不夠坦辟，因為在你實際寫代碼的時候，除了會用到ES6+的相關(guān)語法之外（比如let章办，const）锉走，還會用到一些ES6+新出的API（比如Promise，()=>{}箭頭函數(shù)）,而這些單單靠babel是無法解決的藕届。這個時候就需要使用babel-polyfill來解決這些問題挪蹭。
- 安裝babel-polyfill
npm install babel-polyfill --save
- 在webpack.config.js中引入
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
解決iView引入時的問題
注：這里是按需引用遇到的問題，全部引用目前沒有這個問題
- 先根據(jù)官網(wǎng)要求的進行安裝配置
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
- 然后修改webpack.base.config.js配置文件
//這里的意思是遇到路徑為文件名為iview.src.xxxxjs的都用babel轉(zhuǎn)換為ES5的支持的語法
{
test: /iview.src.*?js$/,
loader: 'babel-loader'
}
其他1
在實際項目中也用到過iview-admin這個第三方開源的后臺管理系統(tǒng)休偶，也遇到了ie11兼容的問題梁厉。下面是解決方法：
首先還是向上面一樣安裝babel-polyfill，然而發(fā)現(xiàn)還是在一直報錯踏兜。后來不斷排查發(fā)現(xiàn)是webpack-dev-server版本的問題词顾。經(jīng)過測試，發(fā)現(xiàn)就webpack-dev-server@2.10.1的版本不行碱妆，其他版本好像都可以（我試了2.7.1和2.11.3）肉盹。
如果你也遇到這樣類似的問題，換個webpack-dev-server版本試試山橄。
npm install --save-dev webpack-dev-server@2.11.3
其他2
那么想要在單個HTML（非vue-cli生成的項目）中如何實現(xiàn)支持ES6+語法垮媒？簡單，只要添加如下代碼即可：
<script src=’./brower.min.js’>
<script type=”text/babel”>
//包含ES6+語法的邏輯代碼
</script>
