vite 配置优雅写法以及环境变量配置项目复杂时，将vite.config.js文件拆分为三个分解然后在根据需求组合起来

项目复杂时，将vite.config.js文件拆分为三个分解然后在根据需求组合起来会更加优雅

vite.config.js

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";


const mergerConfig = {
    "serve": () =>{
        console.log("开发环境")
        return {...viteBaseConfig,...viteProdConfig}
    },
    "build": () =>{
        console.log("生产环境")
        return {...viteBaseConfig,...viteDevConfig}
    }
 
}
export default defineConfig(({command}) =>{
    return mergerConfig[command]()
})

这里的 defineConfig是vite提供的，方便在不同编辑器都可以享受到丝滑的配置代码提示函数。

下面的loadEnv是vite提供的读取环境变量的函数，通常接受三个参数

mode：这是一个字符串，表示当前的模式。通常，模式可以是 development、production 或其他自定义模式。Vite 会根据这个模式来加载相应的环境变量文件。
root：这是一个字符串，表示项目的根目录。通常，你可以使用 process.cwd() 来获取当前工作目录，这样 Vite 就能在正确的位置查找环境变量文件。
prefix：这是一个字符串，表示环境变量前缀。只有以这个前缀开头的环境变量才会被加载。通常，这个前缀是空字符串，表示加载所有环境变量。你也可以提供一个自定义前缀，比如 VITE_，以只加载以 VITE_ 开头的环境变量。


import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";


const mergerConfig = {
    "serve": () =>{
        console.log("开发环境")
        return {...viteBaseConfig,...viteDevConfig}
    },
    "build": () =>{
        console.log("生产环境")
        return {...viteBaseConfig,...viteProdConfig}
    }
 
}
export default defineConfig(({command,mode}) =>{
    const env = loadEnv(mode,process.cwd(),"MB") 
    console.log(env)
    return mergerConfig[command]()
})