vite打包構建時環境變量（env）生成可配置的js文件

現實需求

在vite開發過程中，一些變量可以放在.env（基礎公共部分變量）.env.dev（開發環境）、.env.production（生產環境）中管理，通常分成開發和生產兩個不同的配置文件管理，方便調試和部署。但是在應用部署在若干個不同的運行環境，則需要修改.env.production中的部分變量（如api地址）重新打包會比較麻煩。

怎么樣實現不重新打包的前提下修改配置呢？

答：在build打包時將.env.production和.env文件統一打包成額外的配置js文件，在通過外部掛載的方式做成全局變量即可。

文件結構如下：

1、構建腳本的文件夾結構

在這里插入圖片描述

程序內部調用的文件結構

在這里插入圖片描述
前提條件
.env文件

VITE_GLOB_APP_TITLE=測試平臺
VITE_BASE_URL=/newpath/
VITE_GLOB_APP_SHORT_NAME=GIS_APP

.env.production文件

VITE_API_BASE_URL=/
VITE_LOGIN_API_URL=https://www.baidu.com/login

一、新建打包腳本（build.ts及依賴文件）

腳本目的是在打包目錄下生成_app.config.js，效果如下：
在這里插入圖片描述
_app.config.js結構如下：

window.__PRODUCTION__APP__CONF__ = {"VITE_GLOB_APP_TITLE": "測試平臺","VITE_BASE_URL":"/newpath/","VITE_GLOB_APP_SHORT_NAME": "APP","VITE_API_BASE_URL":"/","VITE_LOGIN_API_URL": "https://www.baidu.com/login"
};
Object.freeze(window.__PRODUCTION__APP__CONF__);
Object.defineProperty(window, "__PRODUCTION__APP__CONF__", {configurable: false,writable: false,
});

1、build.ts

import { runBuildConfig } from "./buildConf"
import pkg from "../../package.json"export const runBuild = async () => {try {const argvList = process.argv.splice(2)if (!argvList.includes("disabled-config")) {runBuildConfig()}console.log(`[${pkg.name}] - 構建成功!`)} catch (error) {console.log("虛擬構建錯誤:\n" + error)process.exit(1)}
}
runBuild()

2、buildConf.ts文件

/*** 用于打包時生成額外的配置文件。該文件可以配置一些全局變量，這樣就可以直接在外部修改，而無需重新打包*/
import fs, { writeFileSync } from "fs-extra"
import { getEnvConfig, getRootPath } from "../utils"
import { getConfigFileName } from "../getConfigFileName"
import pkg from "../../package.json"// 打包腳本的名稱
const GLOB_CONFIG_FILE_NAME = "_app.config.js"
// 輸出文件的根目錄
const OUTPUT_DIR = "dist"interface CreateConfigParams {configName: string;config: any;configFileName?: string;
}function createConfig(params: CreateConfigParams) {const { configName, config, configFileName } = paramstry {const windowConf = `window.${configName}`// 確保變量不會被修改const configStr = `${windowConf}=${JSON.stringify(config)};Object.freeze(${windowConf});Object.defineProperty(window, "${configName}", {configurable: false,writable: false,});`.replace(/\s/g, "")// 拼接新的輸出根目錄地址const filePath = `${OUTPUT_DIR}${config.VITE_BASE_URL || "/"}`// 創建根目錄fs.mkdirp(getRootPath(filePath))writeFileSync(getRootPath(filePath + configFileName), configStr)console.log(`? [${pkg.name}]` + ` - 配置文件構建成功:`)console.log(filePath + "\n")} catch (error) {console.log("配置文件配置文件打包失敗:\n" + error)}
}export function runBuildConfig() {const config = getEnvConfig()const configFileName = getConfigFileName(config)createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME })
}

3、getConfigFileName.ts文件

/*** 獲取配置文件變量名* @param env*/
export const getConfigFileName = (env: Record<string, any>) => {return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || "__APP"}__CONF__`.toUpperCase().replace(/\s/g, "")
}

4、utils.ts文件

import fs from "fs"
import path from "path"
import dotenv from "dotenv"export function isDevFn(mode: string): boolean {return mode === "development"
}export function isProdFn(mode: string): boolean {return mode === "production"
}/*** 是否生成包預覽*/
export function isReportMode(): boolean {return process.env.REPORT === "true"
}/*** 讀取所有環境變量配置文件到process.env* @param envConf* @returns*/
export function wrapperEnv(envConf: any) {const ret: any = {}for (const envName of Object.keys(envConf)) {let realName = envConf[envName].replace(/\\n/g, "\n")realName = realName === "true" ? true : realName === "false" ? false : realNameif (envName === "VITE_PORT") {realName = Number(realName)}if (envName === "VITE_PROXY" && realName) {try {realName = JSON.parse(realName.replace(/'/g, '"'))} catch (error) {realName = ""}}ret[envName] = realNameif (typeof realName === "string") {process.env[envName] = realName} else if (typeof realName === "object") {process.env[envName] = JSON.stringify(realName)}}return ret
}/*** 獲取當前環境下生效的配置文件名*/
function getConfFiles() {const script = process.env.npm_lifecycle_script// eslint-disable-next-line prefer-regex-literalsconst reg = new RegExp("--mode ([a-z_\\d]+)")const result = reg.exec(script as string) as anyif (result) {const mode = result[1] as stringreturn [".env", `.env.${mode}`]}return [".env", ".env.production"]
}/*** 獲取以指定前綴開頭的環境變量* @param match prefix* @param confFiles ext*/
export function getEnvConfig(match = "VITE_", confFiles = getConfFiles()) {let envConfig = {}confFiles.forEach((item) => {try {const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)))envConfig = { ...envConfig, ...env }} catch (e) {console.error(`解析錯誤:${item}`, e)}})const reg = new RegExp(`^(${match})`)Object.keys(envConfig).forEach((key) => {if (!reg.test(key)) {Reflect.deleteProperty(envConfig, key)}})return envConfig
}/*** 獲取用戶根目錄* @param dir file path*/
export function getRootPath(...dir: string[]) {return path.resolve(process.cwd(), ...dir)
}

二、修改vite.config.ts文件

腳本目的是將生成_app.config.js在index.html文件中添加引用，效果如下：
在這里插入圖片描述

1、安裝 vite-plugin-html

yarn add vite-plugin-html -D

或

npm i vite-plugin-html -D

2、vite.config.ts中引用createHtmlPlugin和package.json，并添加createHtmlPlugin

import createHtmlPlugin from "vite-plugin-html"
import pkg from "./package.json"

在這里插入圖片描述

  const getAppConfigSrc = () => {return `${ENV.VITE_BASE_URL || "/"}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`}

      createHtmlPlugin({minify: isBuild,inject: {data: {title: ""},// Embed the generated app.config.js filetags: isBuild? [{tag: "script",attrs: {src: getAppConfigSrc()}}]: []}})

三、代碼內部引用

1、env.ts文件

import { getConfigFileName } from "../../../build/getConfigFileName"
import pkg from "../../../package.json"export function getCommonStoragePrefix() {const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig()return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase()
}/*** 根據版本生成緩存鍵* @returns*/
export function getStorageShortName() {return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase()
}export function getAppEnvConfig() {const ENV_NAME = getConfigFileName(import.meta.env)// 根據當前運行狀態判斷取值，如果是開發環境取.env.dev配置，如果是生產環境取_app.config.js引用的全局變量 const ENV = (import.meta.env.DEV ? (import.meta.env as unknown as any) : window[ENV_NAME as any]) as unknown as any// 此處可以進行過濾判斷根據業務需求處理，示例未做任何處理const { VITE_GLOB_APP_SHORT_NAME } = ENVif (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {console.log(`VITE_GLOB_APP_SHORT_NAME變量只能是字符/下劃線，請在環境變量中修改后重新運行。`)}return ENV
}/*** @description: Development mode*/
export const devMode = "development"/*** @description: Production mode*/
export const prodMode = "production"/*** @description: Get environment variables* @returns:* @example:*/
export function getEnv(): string {return import.meta.env.MODE
}/*** @description: Is it a development mode* @returns:* @example:*/
export function isDevMode(): boolean {return import.meta.env.DEV
}/*** @description: Is it a production mode* @returns:* @example:*/
export function isProdMode(): boolean {return import.meta.env.PROD
}

2、業務調用index.ts文件

import { getAppEnvConfig } from "@mars/hooks/setting/env"export const useGlobSetting = (): Readonly<any> => {const setting = getAppEnvConfig()return setting
}

四、修改package.json文件build命令

1、安裝cross-env和esno

yarn add cross-env -D
yarn add esno -D

或

npm i cross-env -D
npm i esno -D

1、修改build命令，增加"&& esno ./build/script/postBuild.ts"

"build": "cross-env npm run lint && vite build && esno ./build/script/postBuild.ts",

五、測試命令

在命令行執行下面的語句可以測試生成_app.config.js文件

yarn esno ./build/script/postBuild.ts

以上操作就能生成外部配置并加載了，使用時在開發環境、演示環境、生產環境部署修改_app.config.js中對應的api地址即可！