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


这里的兼容性处理主要是针对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中配置会对项目你修改的文件实现转义(推荐)


{
  "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中配置（推荐）


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


​