Vue CLI 3生产构建移除console.log及代码注释的配置问题

嘿，我来帮你搞定这个问题！你现在的配置已经走对了方向，但还有两处关键调整要做，分别对应console.log语句和HTML注释的移除：

1. 移除代码中的console.log语句 #

你当前的Terser配置里，compress选项只开启了移除debugger的功能，但没配置移除console的规则。需要在compress对象里添加drop_console: true，这样Terser就会在压缩阶段自动删掉所有console相关语句。

如果是用项目根目录的vue.config.js（Vue CLI 3优先识别这个配置文件，比直接写webpack.config.js更规范），修改后的配置如下：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    mode: 'production',
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_debugger: true, // 保留移除debugger的配置
              drop_console: true, // 新增：移除所有console语句
              pure_funcs: ['console.log'] // 可选：若只想移除console.log、保留其他console方法（如console.error），可添加这行
            },
            mangle: true,
            module: false,
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_classnames: undefined,
            keep_fnames: false,
            safari10: false,
          },
        }),
      ],
    },
  }
};

2. 移除HTML文件中的注释 #

你提到的<!-- -->注释是在最终生成的HTML文件里的，这部分由html-webpack-plugin控制，不属于Terser的处理范围。需要在Vue CLI配置里开启HTML压缩的移除注释选项，同样在vue.config.js中添加以下配置二选一即可：

方式一：用configureWebpack直接覆盖配置 #

module.exports = {
  configureWebpack: {
    plugins: [
      require('html-webpack-plugin')({
        template: 'public/index.html',
        minify: {
          removeComments: true, // 核心：移除HTML注释
          collapseWhitespace: true, // 可选：压缩HTML空白字符
          minifyCSS: true, // 可选：压缩内联CSS
          minifyJS: true // 可选：压缩内联JS
        }
      })
    ]
  }
}

方式二：用chainWebpack链式修改（更推荐，不破坏默认配置） #

module.exports = {
  chainWebpack: config => {
    // 只在生产环境生效
    if (process.env.NODE_ENV === 'production') {
      config.plugin('html').tap(args => {
        args[0].minify.removeComments = true;
        // 可选：按需添加其他HTML压缩规则
        args[0].minify.collapseWhitespace = true;
        args[0].minify.minifyCSS = true;
        args[0].minify.minifyJS = true;
        return args;
      });
    }
  }
}

验证效果 #

修改完配置后，重新执行npm run build，进入dist目录查看产物：

• JS文件里应该找不到任何console.log语句
• HTML文件中的<!-- -->注释会被完全移除

内容的提问来源于stack exchange，提问作者Tom