Vue项目babel配置（解决IE浏览器兼容问题）

一、package.json文件配置

 "dependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-transform-runtime": "^7.11.0",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@vue/cli-plugin-babel": "^3.9.0",
    "axios": "^0.21.4",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-0": "^6.24.1",
    "clipboard": "^2.0.8",
    "core-js": "^3.6.5",
    "es6-promise": "^4.2.8"
    }

然后npm install -D安装相关依赖.

二、在babel.config.js配置

var plugins = []
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
 plugins.push('transform-remove-console')
}

module.exports = {
 presets: [
   [
     '@vue/app',
     {
       'useBuiltIns': 'entry',
       polyfills: [
         'es6.promise',
         'es6.symbol'
       ]
     }
   ]
 ],
 plugins: plugins
}

三、vue.config.js配置

const path = require('path');
module.exports = {
transpileDependencies: ['node_modules/webpack-dev-server/client'],
chainWebpack: (config) => {
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(path.resolve('src'))
      .add(path.resolve('test'))
      .add(path.resolve('node_modules/webpack-dev-server/client'))
      .add(path.resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      })
  }
}

四、main.js文件配置

import 'babel-polyfill' 
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill() 
Es6Promise.polyfill()