Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9+，Vue 底层是支持。
由于开发过程中，我们经常会使用一些第三方插件或组件，对于这些组件，有时我们需要做一些处理。下述主要阐述如何使用vue-cli3 脚手架搭建的工程支持 IE11。
现象
IE11 打开 Vue 工程（Vue CLI）构建而来出现空白页，控制台告警、报错。
如：
DOM7011: 此页上的代码禁用了反向和正向缓存HTML1300：进行了导航app.js 各种语法错误
browserslist
项目中package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
@babel/preset-env：将你使用最新 JavaScript 语法，灵活的转化为目标浏览器所支持的 polyfill。Autoprefixer：PostCSS 插件，为浏览器增加前缀。
.browserslistrc
> 1%last 2 versionsnot ie < 11
Polyfill
默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过@babel/preset-env和browserslist配置来决定项目需要的 polyfill。
默认情况下，它会把useBuiltIns: 'usage'传递给@babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。
Vue CLI 文档 中，提供了三种方式：
如果该依赖基于一个目标环境不支持的 ES 版本撰写:将其添加到vue.config.js中的transpileDependencies选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill:你可以使用@vue/babel-preset-app的 polyfills 选项预包含所需要的 polyfill。注意es6.promise将被默认包含，因为现在的库依赖 Promise 是非常普遍的。
// babel.config.jsmodule.exports = {presets: [['@vue/app', {polyfills: ['es6.promise','es6.symbol']}]]}
提示：我们推荐以这种方式添加 polyfill 而不是在源代码中直接导入它们，因为如果这里列出的 polyfill 在 browserslist 的目标中不需要，则它会被自动排除
如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify)：请使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。
我们采用了最简单最直接（但是性能不是最好）的第3种方式！
第一步：在 babel 的相关配置文件（babel.config.js、.babelrc 或 package.json 的 babel 字段任一）中，增加"useBuiltIns": "entry"信息。babel 7 版本以后，会有差异 -- Here
babel.config.js
{"presets": [["@babel/preset-env",{"useBuiltIns": "entry"}]]}
IfuseBuiltIns: 'usage'is specified in.babelrcthen do not include@babel/polyfillin eitherwebpack.config.jsentry array nor source. Note,@babel/polyfillstill needs to be installed. IfuseBuiltIns: 'entry'is specified in.babelrcthen include@babel/polyfillat the top of the entry point to your application viarequireorimportas discussed above. IfuseBuiltInskey is not specified or it is explicitly set withuseBuiltIns: falsein your .babelrc, add@babel/polyfilldirectly to the entry array in yourwebpack.config.js.
{"presets": [["@babel/preset-env",{"useBuiltIns": "entry"}]]}
!!! 网上信息比较混乱，经常出现几种方式混用，并不合理！
第二步：安装 '@babel/polyfill' ，并在入口文件添加import '@babel/polyfill'
$ npm install --save @babel/polyfill
main.js
import '@babel/polyfill'
注意，Babel 7.4.0 以后，该包已被弃用（deprecated）。官方推荐使用core-js/stable和regenerator-runtime/runtime替代。-- @babel/polyfill
至此，我们已按照官方要求做了配置，重新启动项目，发现依然不行！！
transpileDependencies
默认情况下babel-loader会忽略所有node_modules中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在transpileDependencies选项中列出来。
下一步：使用 babel 对 elementUI、vuex（需要 Promise polyfill -- Here） 进行转换。
按照 Vue CLI 提供的 3 种方案的第 1种：
如果该依赖基于一个目标环境不支持的 ES 版本撰写:将其添加到vue.config.js中的transpileDependencies选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
vue.config.js
transpileDependencies: [/node_modules[/](element-ui|vuex|)[/]/],
根据你的项目实际情况，此处 element-ui 可能不需要
proxy
针对 Proxy 对象进行 polyfill。
下一步：在index.html文件中引入es6-proxy-polyfill.js
<script src = "/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
根据项目实际情况，看是否有必要引入。如果引入，建议下载到本地，再引入。
至此，项目终于不是空白页了！！
但是，出现了大量排版错误！
css polyfill
由于我们项目中，大量使用了 CSSvar()，IE11 不兼容导致，思路相同，寻找相应的 polyfill 即可。这里我们使用了css-vars-ponyfill
$ npm install --save css-vars-ponyfill
main.js
import cssVars from 'css-vars-ponyfill'cssVars({})
大功告成！
总结
总之，所有的处理都是围绕转换成 IE11 可以兼容的方式去处理。对于 JavaScript 语法，即是对 babel 的控制；对于 CSS 语法，需要特定分析。
IE 微软已不再维护，也希望我们所有的前端小伙伴可以早日脱离这苦海！
欢迎关注 「Super 前端」微信公众号
版权声明：自我的博客：李刚的学习专栏
