electron-vite_19配置环境变量

前端配罟环境变量主要通过项目根目录下的.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);
}
相关推荐
心.c29 分钟前
深拷贝浅拷贝
开发语言·前端·javascript·ecmascript
IT_陈寒1 小时前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥1 小时前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫1 小时前
Vue全局事件总线
前端·javascript·vue.js
Lovereo2 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
蒙娜丽宁2 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花2 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端2 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风2 小时前
Vue3之渲染器
前端·vue.js·面试
刘永胜是我2 小时前
解决Volta环境下npm全局包卸载失败:一次深入排查之旅
前端·node.js