最近，在重构公司官网，需要兼容 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