vue项目打包时去除所有console（webpack）

vue项目在打包时去除所有console，需在vue.config.js加上以下配置

vite项目打包删除console.log

第一步：由于vite是没有集成terser插件的 需要先安装

// 安装
npm install terser --save-dev

第二步：在vite.config.js中编写

// 安装
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
   plugins: [vue()],
   build:{
      minify:"terser",
      terserOptions:{
        compress:{
          drop_console:true,
          drop_debugger:true
        }
      }
    }
});
   

第三部：npm run build

vue3

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    devServer: {
        port: 8085,
    },
    // 打包时去除console
    terser: {
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger:true
            }
        }
    }
})

vue2项目

使用之前先检查node_modules目录中是否有terser-webpack-plugin，有就不需安装了

webpack4的安装方式

npm install terser-webpack-plugin --save-dev@4.2.3

webpack5的安装方式

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    configureWebpack: {
        // 去除页面所有console
        optimization: {
            minimizer: [new TerserPlugin(
                {terserOptions:{
                    compress:{warnings: false, drop_console: true, drop_debugger: true, pure_funcs: ["console.log"]}}
                }
            )],
        },
    },
}