Vue生产环境中移除console信息

Vue项目在生产环境中不需要console信息，只是在开发环境方便我们调试，在生产环境我们需要移除console

所以移除console
首先需要安装一个插件（babel-plugin-transform-remove-console）在vue ui可视化面板的build阶段移除所有的console信息
操作如下 ：
1.如果在vue ui可视化面板中打开项目控制台，点击依赖->开发依赖，输入babel-plugin-transform-remove-console，安装该依赖

2.也可以在命令行中使用 npm install babel-plugin-transform-remove-console --save-dev 进行安装

安装后打开babel.config.js，编辑代码如下：

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

但是此时由于babel.config.js 是全局共享的，所以这种方式不管是项目的开发阶段还是生产阶段，都会生效，都会移除console

所以需要判断当前是开发环境还是生产环境
此时代码如下

//项目发布阶段需要用到的babel插件
const productPlugins = []
​
//判断是开发还是生产阶段
if(process.env.NODE_ENV === 'production'){
  //生产阶段
  productPlugins.push("transform-remove-console")
}
module.exports = {
  "plugins": [
  	// 使用展开运算符展开数组
  	...prodPlugins
  ]
}

此时，在生产环境，项目中的console信息被移除，而开发环境继续存在

本文地址：https://blog.csdn.net/weixin_47377787/article/details/112010631