Vue项目 关闭整个项目console.log的方法

前言

在实际项目开发中，特别是在前后端联调过程中，我们往往会添加很多 console.log 日志来帮助我们开发。大多时候，我们在开发完成之后便将对应的 console.log 删除，但是，有时候我们忘记或者需要在上线后也看一段时间的日志（比如有一些逻辑测试环境无法测试，需要在正式环境进行微调）。

这种时候，我们就可以添加一个全局开启/关闭日志的方法，省去我们挨个添加删除 console.log 的麻烦

关闭方式

使用包 babel-plugin-transform-remove-console

1、安装

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

2、配置

配置 babel.config.js 如果没有该文件，请在项目根目录下新建！

const prodPlugins = [];
// 判断是否为生产环境
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  // { 'exclude': [ 'error', 'warn'] } ：允许打印 error、warn 类型的日志
  // 如果需要允许打印log, 则在exclude配置中添加参数 'log' 即可
  // 若没有exclude参数，则表示禁止打印所以日志
  prodPlugins.push(['transform-remove-console', { 'exclude': [ 'error', 'warn'] }]);
}
module.exports = {
  presets: [
     '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
  	// 使用插件，注意解构
    ...prodPlugins
  ]
}