# 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)