将Vue2中的console.log调试信息移除

前端项目构建生产环境下的package时，咱们肯定要去掉development环境下的console.log，如果挨个注释可就太费劲了，本文介绍怎么使用 'babel-plugin-transform-remove-console' 移除前端项目中所有的console.log.

1. 安装依赖

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

2. 配置 babel.config.js

module.exports = {
  presets: [  // 原有的默认配置
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [  // 加入以下内容，引入插件
    'transform-remove-console'
  ]
}

注意：添加完后，因为是配置文件所以要重新启动项目，npm run serve。这个时候打包再部署上线控制台就没有log了，但是在本地跑项目log也没了，所以接着往下看：

3. 修改 babel.config.js

const pluginsValue = []

switch (process.env.NODE_ENV) {
  case 'localdev':
    break;

  case 'development':
    break;

  case 'devonline':
    break;

  case 'uat':
    break;

  case 'production':  // 只在生产环境下移除 log
    pluginsValue.push('transform-remove-console')
    break;

  default:
    break;
}

module.exports = {
  presets: [  // 原有的默认配置
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: pluginsValue
}

此后，使用 npm run build 生成的dist/中的文件将自动移除console.log的输出语句。一般使用在发布项目时。（此时本地log正常输出，部署上线的控制台没有log）