vue配置不同环境部署后控制面板是否显示console

1.安装相关依赖

npm install babel-plugin-transform-remove-console --save-dev

2.修改babel.config.js文件

目前有三个环境:本地环境(.env.development)、测试环境(.env.staging)、生产环境(.env.production)

.env.development: 

# 添加自定义变量,evn变量必须以VUE_APP为开头

VUE_APP_FLAG = 'development' 

.env.staging：

VUE_APP_FLAG = 'staging'

.env.production：

VUE_APP_FLAG = 'production'

 babel.config.js 新增plugins配置

process.env.NODE_ENV有三个值test、devlopment、product，开发环境和测试环境的NODE_ENV都是devlopment，使用NODE_ENV判断本地项目启动也会去除console，不适合调试，所以在多环境配置.env文件中新增自定义变量来判断当前处于哪个环境

const proPlugins = []
// 如果当前是测试环境或者是生产环境，则使用去掉 console 的插件
if (process.env.VUE_APP_FLAG === 'staging' || process.env.NODE_ENV === 'production') {
  proPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
    }
  },
  plugins: [...proPlugins]
}