vue-cli3下，配置IE瀏覽器兼容性

最近，在重構公司官網，須要兼容ie9/10/11，使用vue-cli構建項目。

在查詢如何兼容ie時，首先是查看vue cli官網,瀏覽器兼容性，感受官網說的不是太明晰（小白一枚，實在不太懂），而後就直接百度了，網上方法基本相似，都是用 browserslist,babel-polyfill等，只是具體步驟有差別，不過 都沒有解決本人問題。通過層層查詢，逐步對vue-cli 原理了解後，網上查詢方法結合本人理解，將問題解決，在此記錄下。

先說步驟，而後說一些本身淺顯理解。

一.解決步驟

1.配置browserslist

配置這一項，有兩個途徑，一是 在 package.json文件中，添加browserslist字段；二是 在項目根目錄，建立一個.browserslistrc文件，兩種途徑。這兩種方法不能同時配置，否則運行serve命令會報錯。

先說package.json中配置，網上不少以下方法：

"browserslist": [
    "> 1%",
    "last 4 versions"
  ]

本人依此配置，報錯！而後按照另一種配置，以下：

"browserslist": [
        "ie 11"
      ]

成功！

額外貼出.browserslistrc方法配置方式（只是列出書寫方式，代碼有效性，按上面來）：

> 1%
last 4 versions

2.安裝babel-polyfill依賴

這個簡單，直接 npm i babel-polyfill --save-dev便可

3.引入babel-polyfill依賴

這一步是關鍵，網上查詢不少，在main.js中，import babel-polyfill引入,本人測試後無效。

具體引入是在vue.config.js中configureWebpack字段中，具體：

configureWebpack: config => {
    config.entry.app = ["babel-polyfill", "./src/main.js"];
 }

即在webpack入口配置中，加入babel-polyfill。至此，在ie下，兼容es6就解決了！

二.本身的理解

上面把問題解決了，再將本身解決過程當中的理解梳理下。

1.首先上面的解決步驟，僅僅適用於源碼(/src)，對依賴包無效。當須要對依賴包作兼容轉譯時，就須要用到官網中Polyfill部份內容了

2.vue-cli中webpack配置文件是在node_modules中的，沒有直接在根目錄，要想配置webpack，須要在vue.config.js中configureWebpack字段或者chainWebpack配置。具體以下：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        querystring: 'querystring-browser'
      }
    }
  }
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('querystring', 'querystring-browser')
  }
}

解決過程當中，查詢的相關資料
1.Vue 兼容 ie9 的全面解決方案
2.Vue CLI 3 瀏覽器兼容性配置
3.Editing webpack.config.js when using vue-cli 3