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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/3782