为了在前端项目打包后删除 console.log 日志，可以采用不同的方法来实现这一目标。以下是几种常见的方式，包括在 Webpack 和 Vite 中的具体实现。

在构建 Vue 应用时，为了提高生产环境的性能和安全性，通常会对代码进行一系列的优化。其中一个常见的优化是在生产环境中移除 console.log 日志，从而减少不必要的日志输出，提高应用性能

webpack生产环境优化

1. 环境判断
首先，我们需要判断当前环境是否为生产环境。这可以通过检查 process.env.NODE_ENV 环境变量来实现：

const isProduction = process.env.NODE_ENV === 'production';  // 判断当前环境是否为生产环境

如果 process.env.NODE_ENV 的值为 'production'，则 isProduction 为 true，表示当前环境为生产环境。

在生产环境中，我们希望移除所有的 console.log 日志。这可以通过配置 terserOptions 来实现。terserOptions 是 webpack 中用于压缩代码的配置项之一。

2.1 配置 terserOptions
在 vue.config.js 中，我们可以使用 configureWebpack 方法来配置 webpack 的相关选项

configureWebpack: config => {  // 配置 webpack
  // 其他配置...

  if (isProduction) {  // 如果是生产环境
    // 为生产环境修改配置...
    // 生产环境自动删除 console
    config.optimization.minimizer[0].options.terserOptions.compress = {
      drop_console: true,  // 删除 console.log
      pure_funcs: ['console.log']  // 删除 console.log 函数调用
    };
  }
}

Vite 环境下的生产环境优化

1. 环境判断
首先，我们需要判断当前环境是否为生产环境。这可以通过检查 process.env.NODE_ENV 环境变量来实现：

const isProduction = process.env.NODE_ENV === 'production';  // 判断当前环境是否为生产环境

2. 生产环境优化
在生产环境中，我们希望移除所有的 console.log 日志。这可以通过配置 terser 插件来实现。terser 是一个用于压缩 JavaScript 代码的工具。
完整的 vite.config.js 示例

import { defineConfig } from 'vite';
import terser from '@rollup/plugin-terser';

const isProduction = process.env.NODE_ENV === 'production';  // 判断当前环境是否为生产环境

export default defineConfig({
  // 基本路径
  base: isProduction ? '/' + process.env.VUE_APP_ORDERURL + '/' : '/',
  
  // 输出文件目录
  build: {
    outDir: process.env.VUE_APP_ORDERURL,
    rollupOptions: {
      plugins: [
        // 生产环境自动删除 console
        ...(isProduction ? [
          terser({
            compress: {
              drop_console: true,  // 删除 console.log
              pure_funcs: ['console.log']  // 删除 console.log 函数调用
            }
          })
        ] : [])
      ]
    }
  }
});