Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
IE9+兼容性问题主要涉及到以下方面：
1、ES6语法支持
2、CSS属性支持
3、axios兼容性
4、...
本文重点解决“ES6语法支持”问题
一、browserslist配置
- 方案一
在package.json文件中作如下配置"browserslist": [ "> 1%", "last 2 versions", "not ie < 11" ] - 方案二
在.browserslistrc文件中作如下配置> 1% last 2 versions not ie < 11
二、babel插件
babel插件能解决基本的ES6语法转换问题
1、添加依赖
- 方案一
项目目录下直接vue add babel - 方案二
通过yarn或者npm引入# yarn yarn add @vue/cli-plugin-babel --dev # npm npm install @vue/cli-plugin-babel --save-dev
2、配置插件
在
babel.config.js文件中如下配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
三、polyfill插件
babel默认只转换新的js语法（syntax），如箭头函数等，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。因此需要polyfill，且需要上线依赖dependency。
1、添加依赖
# yarn
yarn add @babel/polyfill
# npm
npm install @babel/polyfill
2、配置插件
新版本
polyfill并非直接引入@babel/polyfill，而是引入另外两个包，如下，在main.js中引入即可
import 'core-js/stable'
import 'regenerator-runtime/runtime'
四、第三方自定义组件配置
默认情况下
babel-loader会忽略所有node_modules中的文件。如果你想要通过babel显式转译一个依赖，可以在transpileDependencies选项中列出来。
如：element-ui、iview等第三方组件都需要重新转译。
1、配置
在
vue.config.js文件中如下配置即可
module.exports = {
// element-ui|vuex|vuie 都是第三方组件
transpileDependencies: [/node_modules[/\\\\](element-ui|vuex|vuie|)[/\\\\]/],
}
配置完成，尝试重新运行项目吧~
