vue-cli4配置生产环境去除console

一、问题描述

本地开发环境一般会打印很多console进行调试，而且一部分console可能暂时不想删除。但是直接发到生产环境就会比较难看，而且容易暴露相关信息。这个时候就需要配置生产环境去除console了。

二、babel-plugin-transform-remove-console

推荐使用babel的插件babel-plugin-transform-remove-console，这样babel在编译过程中会直接去除console语句。

1.具体配置

安装插件

npm install babel-plugin-transform-remove-console -D

在babel.config.js进行如下配置：

// 适用于生产环境的babel插件
const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
  // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [...prodPlugin]
}

**注：**是在babel.config.js中进行配置，不是vue.config.js