vue项目在打包时，如何一键去掉所有console.log输出

vue项目在打包时，去掉所有的console.log输出

目的：

• 希望项目上线后想让所有的打印失效

分析

1. 如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦

2. 能否配置环境变量, 让代码自己来判断呢，配置好就不用我们在来回操作了

那么接下来就是实现方式了：

• 首先在项目 根目录下配置文件(脚手架环境变量)

• 在.env.development (开发环境变量)

  NODE_ENV 变量名随便起, 值不用加引号就是字符串了

  NODE_ENV=development

• 在.env.production (生产上线环境变量)

  NODE_ENV=production

1. 在main.js里加入如下配置

   if (process.env.NODE_ENV !== 'development') { // process是Node环境全部变量, 运行时根据敲击的命令不同, 脚手架会取环境变量给env添加属性和值
       console.log = function () {}
       console.error = function(){}
       console.dir = function(){}
   }
   

小结

1. 我们可以在这2个文件里定义不同的属性和值, 来区分线上和线下环境不同的值

2. 而且可以让代码自适应在不同环境, 自动选择对应值来使用

方法二:

在vue.config.js中，配置：

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}