vue-cli 3.0生产环境中去除console

一、问题描述

当我们在开发环境是，可能会打很多console来调试，但是发布到生产环境后，这些console就会很不美观而且影响性能还容易暴露部分信息。但是要一个一个删除太过麻烦，并且可能后续开发还要使用。这里就推荐一些插件来解决这些问题

二、具体插件

1.babel-plugin-transform-remove-console

（1）安装

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

这里安装到开发环境即可，生产环境不需要，避免无用包出现在生产环境

（2）配置

在vue项目的一级目录下的 babel.config.js 中进行如下配置：

// 移除生产环境console
const myPlugins = [];
if (process.env.NODE_ENV === "production") {
  myPlugins.push("transform-remove-console");
}
module.exports = {
  plugins: [...myPlugins],
  presets: ["@vue/cli-plugin-babel/preset"]
};

2.terser-webpack-plugin

（1）安装

npm install terser-webpack-plugin -D

（2）配置

在vue项目的一级目录下的 vue.config.js 中进行如下配置：

module.export = {
  configureWebpack: (config)=>{
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
}