Vite构建前端项目，在生产环境隐藏console和debugger

前言

本文主要探讨在前端项目构建过程中，在生产环境隐藏console和debugger，需要在vite配置文件修改的内容

debugger

JavaScript的 debugger 语句会导致运行中的调试器（Chrome Dev Tools Debugger）将该语句视为自动配置的断点（breakpoint）。当调试器打开时，包含该语句的代码将自动暂停。如果没有打开调试器，则该语句不执行任何操作。从代码中删除这些语句只会阻止调试器在代码运行时自动停止。

console

JavaScript的 console.* API 函数调用，它提供了浏览器控制台调试的API接口。例如console.info() , console.count(), console.log(), console.time(), console.error()等等

问题

项目最近升级到了vue3, vite4之后上线，遇到问题是生产环境需要隐藏console和debugger，因选择的压缩工具而异，在这片文章我们分别介绍esbuild和terser两种方案

Terser 压缩

我们需要更改vite的构建选项
如下：

// vite.config.js

import {
   
    defineConfig } from 'vite'

export default defineConfig(({