Vue关闭线上环境console

发表于

关于关闭线上环境console

在之前，我通过这样一行代码实现…

1
console.log = () => {}

虽然够用，但是不够优雅，难以维护。

而现在在前端工程化的环境下，这样的代码显然不易于维护，最好是通过配置的方式来解决

Vue-Cli 3.0之后的版本中将webpack.config.js配置文件隐藏，转而使用vue.config.js来替代。

在vue.config.js中添加如下代码

1
2
3
4
5
6
configureWebpack(config) {
    // 关闭线上环境console
    if (process.env.NODE_ENV === 'production') {
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
}

在普通webpack4环境中则可以使用terser-webpack-plugin这个插件

关键代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
          },
        },
      }),
    ],
  },
};

// 作者：sakibcc
// 链接：https://juejin.im/post/5c84b709e51d4578ca71dde4
// 来源：掘金

解决问题很简单，而优雅的解决问题，让维护成本降低，是程序员的优雅追求。