Vue project closes the method of console.log of the entire project

foreword

In actual project development, especially in the process of front-end and back-end joint debugging, we often add a lot of console.log logs to help us develop. Most of the time, we delete the corresponding console.log after the development is completed, but sometimes we forget or need to read the log for a period of time after going online (for example, some logic test environments cannot be tested and need to be fine-tuned in the formal environment ).

At this time, we can add a method to enable/disable the log globally, saving us the trouble of adding and deleting console.log one by one

Closing method

use package babel-plugin-transform-remove-console

1. Installation

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

2. Configuration

Configuration babel.config.js If there is no such file, please create a new one in the project root directory!

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
  ]
}