前言

在實(shí)際工作過程中，用到了Vue和iView。但是遇到了在ie11中不兼容的問題，經(jīng)過網(wǎng)上多方的查詢，終于收集了一套完整的解決方案，下面將它分享出來。

正文

解決ie不支持es6語法問題

在使用vue-cli搭建Vue的當(dāng)頁面項(xiàng)目時，會自動幫你安裝包babel相關(guān)的組件。babel的作用是將ES6+的語法轉(zhuǎn)換為ES5的語法，這樣就能保證被瀏覽器兼容（沒錯，說的就是IE11）。
但是這還遠(yuǎn)遠(yuǎn)不夠，因?yàn)樵谀銓?shí)際寫代碼的時候，除了會用到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)要求的進(jìn)行安裝配置

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

在實(shí)際項(xiàng)目中也用到過iview-admin這個第三方開源的后臺管理系統(tǒng)，也遇到了ie11兼容的問題。下面是解決方法：
首先還是向上面一樣安裝babel-polyfill，然而發(fā)現(xiàn)還是在一直報(bào)錯。后來不斷排查發(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àng)目）中如何實(shí)現(xiàn)支持ES6+語法？簡單，只要添加如下代碼即可：

<script src=’./brower.min.js’>
<script type=”text/babel”>
  //包含ES6+語法的邏輯代碼
</script>