vue-cli3 移除生产环境console打印的日志

在项目开发过程中，我们通常需要通过console.log输出日志信息进行代码调试，但是在生产环境上，为了安全往往需要删除控制台打印的日志。为了实现这个效果，可以借助插件babel-plugin-transform-remove-console实现。

1、安装依赖

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

2、找到babel.config.js文件，进行如下配置：

const plugins = []
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
    
    
  plugins.push("transform-remove-console")
}
module.exports = {
    
    
  plugins: plugins,
  presets: [
    '@vue/app'
  ]
}

以上配置会在生产环境删除所有日志输出，包括警告、错误信息等。保留警告和错误信息，可以进行如下改造：

if(process.env.NODE_ENV === 'production') {
    
    
  plugins.push(["transform-remove-console", {
    
     "exclude": [ "error", "warn"] }])
}

正常情况下，进行上述配置，并重新执行构建任务后会生效。如果没有生效，就需要看看项目中有没有进行其他错误信息拦截，从而导致没有打印警告和错误信息。

我在项目中按照上述方式配置后，发现并未生效，经过一段时间的探索，终于找到了原因：项目中通过 Vue.config.errorHandler 进行了异常处理

Vue.config.errorHandler = function(err, vm, info) {
    
    
  Vue.nextTick(() => {
    
    
    if (process.env.NODE_ENV === 'development') {
    
    
      console.group('>>>>>> 错误信息 >>>>>>')
      console.log(info)
      console.groupEnd()
      console.group('>>>>>> Vue 实例 >>>>>>')
      console.log(vm)
      console.groupEnd()
      console.group('>>>>>> Error >>>>>>')
      console.log(err)
      console.groupEnd()
    }
  })
}

如上，只有在开发环境才会输出相关信息，所以需要在原有基础上，添加生产环境的异常处理

    if(process.env.NODE_ENV === 'production'){
    
    
      console.error(err)
    }