利用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')
  },