前端配罟環境變量主要通過項目根目錄下的.env系列文件實現，不同框架(如Vue、React)或構建工具(如Vite、Webpack)的具體操作略有差異，但核心邏輯均為通過環境變量文件區分開發、測試、生產等環境。

方案1: 直接在根目錄新建.env文件

1.在根目錄新建 .env.devYyh 文件,被添加的在import.meta.env.[xxx]進行訪問

VITE_APP_NAME='Yyh調度平臺'

2.在package.json 文件中添加

"scripts": {"dev": "electron-vite dev --mode devYyh",
}

3.在主進程main.ts中打印

function createWindow(): void {// console.log('應用名稱：', import.meta.env.VITE_APP_NAME);console.log('應用名稱：', (import.meta.env as any).VITE_APP_NAME);
}

方案2: 配置環境變量文件件把文件全部放到這個地方

1.找到electron.vite.config.ts 文件，指定環境變量文件夾,

export default defineConfig({main: {envDir: './viteEnv',},preload: {envDir: './viteEnv',},renderer: {envDir: './viteEnv',}
})

2.在viteEnv目錄新建 .env.devYyh 文件,被添加的在import.meta.env.[xxx]進行訪問

VITE_APP_NAME='Yyh調度平臺'

3.在package.json 文件中添加

"scripts": {"dev": "electron-vite dev --mode devYyh",
}

4.在主進程main.ts中打印

function createWindow(): void {// console.log('應用名稱：', import.meta.env.VITE_APP_NAME);console.log('應用名稱：', (import.meta.env as any).VITE_APP_NAME);
}