vue3 生产环境去掉console.log

在开发项目时,为了便于调试,我们一般会输出很多console.log,但是在生产环境中我们是要去掉这些的.
但是如果手动删除,就有点麻烦了,而且如果以后再开发调试的时候,还得重写再写console.log

不过好在webpack提供了删除console.log的插件,在vue3里面是这样用的:

首先安装terser-webpack-plugin

npm install terser-webpack-plugin -D

接着在vue.config.js中这样配置一下

if (process.env.NODE_ENV === 'production') {
      return {
        optimization:{
          minimizer: [
            new TerserPlugin({
              sourceMap:false,
              terserOptions:{
                compress:{
                  drop_console : true
                }
              }
            })
          ]
        } 
      }
    }

因为我的项目不仅需要这个插件,我还使用了jquery插件,所以我下面附上我完整的配置文件

// vue.config.js

const webpack = require('webpack')
const Timestamp = new Date().getTime()
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  // 选项...
  lintOnSave: false,
  publicPath: './',
  outputDir: 'dist',
  configureWebpack: (config)=>{
    if (process.env.NODE_ENV === 'production') {
      return {
        optimization:{
          minimizer: [
            new TerserPlugin({
              sourceMap:false,
              terserOptions:{
                compress:{
                  drop_console : true
                }
              }
            })
          ]
        },
        plugins:[
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'windows.jQuery': 'jquery'
          })
        ]
      }
    }else{
      return{
        plugins:[
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'windows.jQuery': 'jquery'
          })
        ]
      }
    }
  },
  productionSourceMap: false,
}

这些仅供大家参考,如果有更好的方法,欢迎大家留言