在项目开发过程中,我们通常需要通过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)
}