青岛 外语网站建设游戏推广平台代理

前端项目构建生产环境下的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':  // 只在生产环境下移除 logpluginsValue.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）