electron-vite_19配置环境变量

web前端进阶者2025-08-22 11:52

前端配罟环境变量主要通过项目根目录下的.env系列文件实现，不同框架(如Vue、React)或构建工具(如Vite、Webpack)的具体操作略有差异，但核心逻辑均为通过环境变量文件区分开发、测试、生产等环境。

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

1.在根目录新建 .env.devYyh 文件,被添加的在import.meta.env. $xxx$ 进行访问

typescript 复制代码

VITE_APP_NAME='Yyh调度平台'

2.在package.json 文件中添加

json 复制代码

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

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

typescript 复制代码

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 文件，指定环境变量文件夹,

typescript 复制代码

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

2.在viteEnv目录新建 .env.devYyh 文件,被添加的在import.meta.env. $xxx$ 进行访问

typescript 复制代码

VITE_APP_NAME='Yyh调度平台'

3.在package.json 文件中添加

json 复制代码

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

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

typescript 复制代码

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