vue cli 5.x 配置生产环境不输出console.log

前言

本文基于 vue-cli 5.0.6 版本

vue-cli 5 版本已经将 webpack 版本升级为5版本，具体变更可以自行查看 vue-cli 迁移日志 从 Vue CLI v4 到 v5

terser-webpack-plugin 插件 vue-cli 自带，无需自己安装，直接配置就可以。

1.vue-cli 4.x 版本，配置如下

module.exports = {
  configureWebpack: config => {
    // 环境判断
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    } else {
      // 为开发环境修改配置...
    }
  }
};

2.vue-cli 5.x 版本

相比于 4.x版本，5.x配置变化有如下几个

1. drop_console 位置由原来的 terserOptions.compress 变更至 minimizer.options.compress 对象下
2. drop_console 不在设有默认选项，所以无法通过 . 的方式来配置，需要通过 Object.assign 方法来添加配置
   

配置如下

module.exports = {
  configureWebpack: config => {
    // 环境判断
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(
        config.optimization.minimizer[0].options.minimizer.options.compress,
        {
          drop_console: true
        }
      );
    } else {
      // 为开发环境修改配置...
    }
  }
};

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。