vue cli 3.0 文件压缩去掉console

vue项目里面调试信息console.log通过打包自动去掉方式

我在vue.config.js文件的配置项增加了这几行代码

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [ 'console.log' ]
    }
  }
  

注意：这里使用了环境变量进行控制，只有打生产包的时候才会调用这个插件进行打包优化，因为development环境下config.optimization是undefined
解释一下：vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化，具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到，terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中，在生产环境加入以上配置项即可

赞10