一开始的 terser 方式

先在网上搜的方法如下：

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    build: {
        minify: 'terser',
        terserOptions: {
            compress: {
                //生产环境时移除console
                drop_console: true,
                drop_debugger: true,
            },
        },
    },
})

但是我没有抄那个 minify，然后控制台提示

build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".

我搜了一下，minify 是前端的最小化混淆技术的配置，默认是 esbuild，关键他比 terser 快很多倍，那我肯定要找找 esbuild 的配置

最小化混淆

减小代码的大小并增加代码的难度，使其更难以理解和逆向工程。

常见的是以下几种：

1. 代码压缩：使用压缩工具（如UglifyJS、Terser等）将代码中的空格、注释和无关字符删除，并缩短变量和函数名。这样可以减小文件大小并保护代码的结构。
2. 标识符重命名：将代码中的变量和函数名替换为短、无意义的名称，例如将 "user" 替换为 "a"。这使得代码更难以理解和阅读，增加了逆向工程的难度。
3. 字符串加密：对于敏感的字符串（如API密钥、URL等），可以使用加密算法将其转换为加密的形式，并在运行时解密。这样可以隐藏敏感信息，防止被直接暴露在代码中。
4. 代码拆分：将代码拆分为多个文件，然后使用工具（如Webpack、Rollup等）进行打包。这样可以提高加载速度，并使代码更加难以理解。
5. 条件逻辑修改：对于条件语句和循环语句，可以改变其结构，增加无关的分支、循环或条件，使代码的控制流程更加复杂，防止简单的逆向工程。
6. 反调试和反逆向工程技术：使用各种技术手段来防止代码被调试和逆向工程，例如检测开发者工具的打开、修改代码行为等。

esbuild 的去除 console、debugger 配置

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
    return {
        plugins: [vue()],
        build: {
            esbuild: {
                drop: mode === 'production' ? ['console', 'debugger'] : []
            },
        },
    }
})

这里有一个点是我不知道怎么获取 mode，虽然我在 .env 文件里面设置了 import.meta.env.VITE_NODE_ENV，但是没有生效，通过 import.meta.env.VITE_NODE_ENV 并不能获得 mode，后来是通过 defineConfig 可以传入一个方法，然后返回配置对象，传入方法可调用参数 mode 获取的 mode。

// .env
VITE_NODE_ENV=production
VITE_APP_API_BASE_URL=/api
VITE_APP_SOCKET_BASE_URL=/ws

网上搜到两种获取 .env 文件里面的参数的解决方法，没有试过，记录一下

// dotenv 需要单独npm install  
export default ({ mode }) => {  
    require(‘dotenv’).config({ path: `./.env.${mode}` });  
    // now you can access config with process.env.{configName}  
    return defineConfig({  
        plugins: [vue()],  
        base:process.env.VITE_APP_NAME  
    })  
}

// 第二种：  
import { loadEnv } from ‘vite’  
export default ({ mode }) => {  
    return defineConfig({  
        plugins: [vue()],  
        base:loadEnv(mode, process.cwd()).VITE_APP_NAME  
    })  
}