Vue生产环境中移除console信息_vue.js

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
  ]
}