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
   }),
   // ...
 ]
  1. 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',
      }
    ]
  ]
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐