# vue cli 兼容IE浏览器 默认的 Vue CLI 项目使用[`@vue/babel-preset-app`](https://www.npmjs.com/package/@vue/babel-preset-app)（简写 `@vue/app`），这个包它使用`@babel/preset-env`和`.browserslistrc`配置来确定项目所需的polyfills。 `@vue/babel-preset-app`把`@babel/preset-env`重新包装了，原来的`@babel/preset-env`可能在配置的时候有好几个属性，经过包装之后，开发者只需要配置一些项即可。 `useBuiltIns`默认`usage`，除了默认的还有`entry`以及`false`两个选项，而`@babel/preset-env`默认的`useBuiltIns`是`false`，上面有说到`@vue/babel-preset-app`是把`@babel/preset-env`重新封装了一遍，`useBuiltIns`也是被重新更改默认了。 `@vue/babel-preset-app`的polyfills默认以下四项 ``` [ 'es6.array.iterator', 'es6.promise', 'es6.object.assign', 'es7.promise.finally' ] ``` VUE CLI 中默认提供core-js > 注意：使用cli提供的默认core-js版本请勿替换 # Vue Cli 3 ``` npm install --save @babel/polyfill ``` `main.js`最顶端添加 ``` import "@babel/polyfill"; ``` # Vue Cli 4 `main.js`最顶端添加 ``` import "core-js/stable"; import "regenerator-runtime/runtime"; ``` 打开`babel.config.js` ``` module.exports = { presets: [ "@vue/cli-plugin-babel/preset", [ "@babel/preset-env", { useBuiltIns: "entry", corejs: 3 } ] ] }; ``` # `vue.config.js`配置 配置`usage`可以按需引入转换代码，但是对于`node_modules`文件夹下的代码，默认是不会转换的（使用vue cli创建的项目，babel-loader默认不会转换这部分代码），所以类似ant-design，element-ui这些使用了新的api的库，在`node_modules`里是不会被转换的。 对于此，可以再用`entry`方式来全量引入，确保api转换不会出问题，当然可也以修改`vue.config.js`配置文件来增加对`node_modules`下的库转换，代码如下： ~~~javascript module.exports = { ... transpileDependencies: ['ant-design-vue'], } ~~~ # css采用什么方式进行兼容？ css兼容采用的是 postcss-loader + autoprefixer + browserslist 作为技术栈，打包的时候根据`.browserslistrc`对一些比较新的 css 属性添加前。 而`.browserslistrc`是根据caniuse的数据来作为支撑的，但是现在caniuse的数据已经不够准确了，大量的项目实践表明：android >= 5 并不能涵盖所有 Android 5.0 以上的设备，增加 chrome >= 36 可以解决，因为Android 5.0 设备内置 webview 的最低版本为chrome36。 所以`.browserslistrc`如果有android >= 5的话，后面最好再加上chrome >= 36。 # 参考 > [一张图教你快速玩转vue-cli3](https://juejin.cn/post/6844903877133729799)