利用babel + vue.config.js中的chainWebpack配置实现项目的浏览器兼容性处理

这里的兼容性处理主要是针对IE10-和360浏览器兼容模式下的兼容性处理 （这里以ant-design为例）

1.配置babel文件：

1）babel.config.js

在babel.config.js中配置会对整个项目实现转义

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],

  plugins: [
    ['import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }
    ] //`style: true`会加载less文件
  ]
}

2）.babelrc

 在.babelrc中配置会对项目中你修改的文件实现转义(推荐，直接将babel.config.js修改为.babelrc就行)

{
  "presets": [
      [
          "@babel/preset-env",
          {
              "modules": false,
              "useBuiltIns": "entry",
              "corejs": {
                  "version": 3,
                  "proposals": true
              }
          }
      ]
  ],
  "plugins": [ ]//全局引入antd
　

　　"plugins": [ //按需引入

    ["import", {

      "libraryName": "ant-design-vue",

      "libraryDirectory": "es",

      "style": "css"

    }]

  ]

}

2.配置 browserslist

1）在package.json中配置（推荐，直接在package.json的第一层括号中添加）

"browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
  ]

2）在.browserslistrc文件中配置

> 1%
last 2 versions
not ie <= 8

3.在vue.config.js中添加ant-design-vue的rule

chainWebpack: (config) => {
    // 以下相当于webpack的module配置
    config.module
      .rule('ant-design-vue')
      .test(/(\.jsx|\.js)$/)
      .include
      .add(path.join(__dirname, './node_modules/ant-design-vue'))
      .add(path.join(__dirname, './node_modules/ant-design-vue/es/icon'))
      .end()
      .use('babel')
      .loader('babel-loader')
  },