electron-vite_19配置环境变量

141 阅读1分钟

前端配罟环境变量主要通过项目根目录下的.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);
}