vue-cli3打包后去掉控制台打印（console）

vue-cli3打包后去掉控制台打印（console）

代码正式环境发布之前，无特定需求应该删除一切控制台打印（代码每次push之前应检查是否带有console）
可以借助一些打包工具过直接滤掉，分享一些方法：

方法一： terser-webpack-plugin

通过npm包 terser-webpack-plugin 来实现
第一步：安装
npm install terser-webpack-plugin --save-dev

第二步：配置 （vue.config.js）

module.export = {
  configureWebpack: (config)=>{
    		if(process.env.NODE_ENV === 'production'){
      			config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    		}
  }
}

方法二：uglifyjs-webpack-plugin

1. vue-cli2

plugins: [
  new webpack.optimize.UglifyJsPlugin({  // 自动删除console.log
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      },
      sourceMap: true
   }),
   // ...
 ]

2. vue-cli3

【vue.config.js 】配置如下

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

configureWebpack: {
  optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,//console
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
      })
    ]
  }
}

方法三：babel-plugin-transform-remove-console【推荐】

$ npm install babel-plugin-transform-remove-console --save-dev
or
$  yarn add babel-plugin-transform-remove-console --dev

【babel.config.js】配置如下

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      '@vue/app', {
        modules: false,
        targets: {
          browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
        },
        useBuiltIns: 'entry',
      }
    ]
  ]
}