项目开发到一半，项目经理要求前端需支持IE10。（好吧，最早沟通只是要求满足新版本的Chrome、FireFox浏览器即可）。

尝试在IE中打开，发现浏览器报错。报错信息如下图（只截取了部分）：

报错大致上就是，对象不支持JS很多新的API。

补充一下项目环境与版本：

浏览器：IE10及以上

版本：

"vue": "^2.6.10",
"vue-router": "^3.1.3","vuex": "^3.1.2","ant-design-vue": "^1.5.1",

"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-typescript": "^4.1.0",

项目前端采用Vue-cli 4.3*脚手架构建， Vue + TS + Ant + Vue-Echarts 开发了一个B端管理后台。

1. Polyfill 问题。

针对如上问题分析：主要是浏览器不兼容ES2015+, 而项目中Bable并没有将JS进行转换。Babel默认只转换新的JavaScript句法（syntax），而不转换新的API。但是以前至少还有@Babel/Polyfill呀。难道是因为TS的原因？

度娘一搜，增加垫片试一试！

npm i babel-polyfill -S

（ps：这边需要添加到dependencies而不是devDependencies中），

在入口文件main.ts中加入

import 'babel-polyfill'

(ps:一定要加到首行)。

然后在babel.config.js中修改presets的配置为：

presets: [        ['@vue/app', {            polyfills: [                'es6.promise',                'es6.symbol',                'es6.array.iterator',                'es7.promise.finally'            ]        }        ]    ],

到此为止，运行程序，登录页出来了，但是登录时首页又打不开。又是啥幺蛾子，下面再说。

另一个开发跟我讲，引入垫片就可以了，修改了配置后他反而无法运行了。啥，不用修改babel.config.js就可以了？

恩，决定认真研究一下：@vue/cli-plugin-babel/preset，去Vue-cli官网看看兼容问题怎么给出的建议。

Browser Compatibility

Polyfills

A default Vue CLI project uses @vue/babel-preset-app, which uses @babel/preset-env and the browserslist config to determine the Polyfills needed for your project.

默认情况下，它会把 useBuiltIns: 'usage'传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。

了解了@babel/polyfill，

Since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

原来在babel 7.4.0之后，@babel/polyfill就废弃了。今后要使用垫片，通过增加core-js（to polyfill ECMAScript features）就可以了。项目中babel/core是7.9版本。

官网看一看@babel/preset-env关于兼容问题的解决建议，

useBuiltIns

This option configures how @babel/preset-env handles polyfills

按照官网做法：

npm install core-js@3 --save

# or

npm install core-js@2 --save

选择安装了core-js@3

在babel.config.js中配置：

module.exports = {

presets: [

['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]

],

plugins: [

[

'import',

{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }

]

};

在mian.ts引入：

import "core-js"; //首行

哈哈，运行一下，用官方的做法在IE10中能够正常访问了。

2. Vue-Echarts兼容问题。

错误如下：

登录时浏览器报错，真的无法想到是首页中因引入Vue-Echarts导致的不兼容。

恩，度娘一下没有合适的解释？完全没想到是首页的问题，只能屏蔽其它页面，和不需要的import...,历经曲折，锁定Vue-Echarts。

去Vue-Echars官网和仓库翻了一遍找到了N久前网友来自灵魂的问题。

github.com/ecomfe/vue-…

将网友们提供的方式试了一试，最终确定按照如下方式解决：

我们之前安装的时候是cnpm用的淘宝的镜像进行安装的，我们需要用npm原生的源进行安装，我们把node_modules、package-lock删除，更新npm cache clean缓存然后npm进行重新安装，启动服务，ie正常访问。

如上是问题的解决过程，如果不对支持请大家批评指正。希望对遇到同样问题的同学有帮助。

记一次Vue-Cli项目兼容IE10的问题