Vue项目（vue-cli3 + antd）使用babel对IE进行兼容处理之小白踩坑史

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统
需求：兼容IE（过低版本做版本升级提示）
——前期测试环境未做兼容性的处理，导致正式环境测试时发现使用某些浏览器（某360的5.0正式版及盗版Chrome(￢_￢)百度一查说是使用了IE内核）会导致页面无法正常加载影响使用
接下来，开始我的踩坑经历…

第一坑：babel-loader 和 babel 需要版本合适并配套使用

参考《babel-loader》
如未进行版本匹配使用，打包后会出现类似报错( ‘-ωก̀ )以下为官网说明↓↓↓

提供两种解决方式小伙伴们可以参考：
1、回退到低版本

npm install -D babel-loader@7 babel-core babel-preset-env

2、更新到最高版本

npm install -D babel-loader @babel/core @babel/preset-env webpack

第二坑：关于babel的配置

咱们把babel家族拉进群后，当然还少不了要给他们加个备注呀啥的方便咱们整个项目其他兄弟了解（●>∀<●）（纯粹瞎说…）
需要对babel进行配置
我使用的是vue-cli3则直接在babel.config.js 和 vue.config.js中配置

babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    // 兼容配置
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry'
      }
    ]
  ],
  // 按需加载配置
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css'
      },
    ]
  ]
}

vue.config.js

configureWebpack: config => { 
    config.entry.app = ['babel-polyfill', './src/main.js']
    }

按上面配置完后，打包，结果打开页面的时候报了一个 Antd is not defined
然后参考了以下文章 https://blog.csdn.net/qq_39990827/article/details/90700077
发现在做配置的时候设置了按需引入，但其实自己是全局引入了antd~~

以上就是我的踩坑经历啦~多踩踩才有进步嚯嚯（//▽//）