vue2 + vue-cli3+ 设置兼容IE10+ 避坑指南

1. 使用vue2+ vue-cli3+ 搭建vue项目。
2. 查看package.json是否有安装有安装core-js，如没有的话就安装一下。
   使用：npm i core-js
3. 配置main.js，在最前面新增引入

// IE10兼容 with polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'

4. 设置：babel.config.js。如没有该文件，则新建一个，配置如下：

module.exports = {
  presets: [
    [
    '@vue/cli-plugin-babel/preset',
    {
      useBuiltIns: 'entry',
      corejs: 3
    }
    ]
  ],
  plugins: [ ]
}

5. 设置：vue.config.js，如没有该文件，则新建一个，配置如下：

module.exports = {
    // 添加transpileDependencies配置属性，按需添加需要编码的内容
    transpileDependencies: ['*'],
}

这个配置后，能解决IE上这个报错，如图：

image.png

6. 安装axios时，注意axios的版本号。
   当版本号过高时候，会出现如下所示错误，从而导致页面加载为空：

   
   
   1665997237166.png
   
   

   开始我安装的是： "axios": "^1.1.2"，
   后来改成"axios": "^0.19.2" 版本就解决了这个问题。
   安装命令：

npm i [email protected] -D