场景描述

在vue-cli创建的项目中，开发阶段会经常使用console来打印内容，方便我们调试，但是生产阶段我们不希望在控制台输出信息，可以使用babel-plugin-transfrom-remove-console插件

环境

"dependencies": {
	"vue": "^2.6.11",
},
"devDependencies": {
	"babel-plugin-transform-remove-console": "^6.9.4",
}

步骤

安装

npm i -D babel-plugin-transfrom-remove-console

配置

注意：此不是最终配置

在babel.config.js中配置下面的内容：

module.exports = {
  'plugins': [
    'transform-remove-console'
  ]
}

上面的配置会导致开发和生产中关于"console"都会被移除，那针对开发阶段就不友好了，如何让上面的配置只在生产时有效？？

最终配置

思路：通过获取vue ui执行编译 、打包执行命令时传递的mode值来执行不同的脚本

babel.config.js

// 项目开发阶段用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  'plugins': [
    // 发布产品时候的插件数组
    ...prodPlugins
  ]
}

验证

编译时console的内容有输出，打包时无console的内容输出。

开发阶段console的内容可以输出，生产阶段console的内容不会输出