VueJS 2如何在生产构建移除console.log并兼容IE调试场景？

嘿，我来帮你搞定这个console自动移除的问题！你找对方向了——确实可以通过Webpack配置实现开发模式保留console、生产模式自动剔除的需求，不过可能是插件选择或者配置细节没到位，我给你梳理下正确的做法：

1. 先确认Webpack版本（关键！） #

Webpack 4及以上版本，官方已经不再推荐uglifyjs-webpack-plugin了——它对ES6+语法支持有限，现在官方标配是terser-webpack-plugin，这也是Vue CLI默认使用的代码压缩插件。如果你的项目是Vue CLI生成的，其实已经内置了这个插件，只需要调整配置就行；如果是自定义Webpack配置，得先安装它：

npm install terser-webpack-plugin --save-dev
# 或者用yarn
yarn add terser-webpack-plugin -D

2. 生产环境配置（自动移除console） #

在你的生产模式Webpack配置文件（比如webpack.prod.conf.js）里，修改optimization配置项，添加Terser插件并开启移除console的规则：

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

module.exports = {
  // 你的其他Webpack配置（入口、输出、loader等）...
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            // 生产环境直接移除所有console相关语句
            drop_console: true,
            // 可选：如果想保留console.error和console.warn，就用下面这行替换上面的drop_console
            // pure_funcs: ['console.log', 'console.info', 'console.debug']
            warnings: false // 关闭压缩时的警告提示
          },
          format: {
            comments: false // 移除代码中的注释
          }
        },
        sourceMap: false // 生产环境建议关闭sourceMap以减小打包体积，需要的话可以设为true
      })
    ]
  }
};

3. 开发环境配置（保留console） #

在你的开发模式Webpack配置文件（比如webpack.dev.conf.js）里，不需要启用代码压缩插件，确保minimizer为空数组即可，这样Webpack不会修改你的代码，console语句会完整保留：

module.exports = {
  // 你的其他开发环境配置...
  optimization: {
    minimizer: [] // 开发环境不启用代码压缩，保留所有原始代码
  }
};

4. 如果坚持使用UglifyJsPlugin（不推荐） #

如果你因为项目兼容等原因必须用uglifyjs-webpack-plugin，要注意它只支持ES5语法，所以你的代码需要先通过Babel转译为ES5，再配置插件：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // 其他配置...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: {
            drop_console: true,
            warnings: false
          },
          output: {
            comments: false
          }
        }
      })
    ]
  }
};

验证配置是否生效 #

配置完成后，运行生产构建命令（比如npm run build），查看打包后的产物代码，你会发现console.log('only in development mode');已经被完全移除，只剩下alert('a'); alert('b');；而启动开发服务（npm run dev）时，console语句会原样保留，完全符合你的需求。

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