Vue2.0兼容IE10+

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|)[/\\\\]/],
}

---

配置完成，尝试重新运行项目吧~