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);
}
相关推荐
Hao_Harrision7 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DrawingApp(画板组件)
前端·react.js·typescript·tailwindcss·vite7
dly_blog8 分钟前
Vite 原理与 Vue 项目实践
前端·javascript·vue.js
仅此,24 分钟前
前端接收了id字段,发送给后端就变了
java·前端·javascript·spring·typescript
Lovely Ruby25 分钟前
[前端] 封装一下 echart 6,发布到 npm
前端·npm·node.js
BD_Marathon27 分钟前
NPM_常见命令
前端·npm·node.js
绿鸳30 分钟前
12.17面试题
前端
Huanzhi_Lin43 分钟前
禁用谷歌/google/chrome浏览器更新
前端·chrome
咸鱼加辣1 小时前
【前端的crud】DOM 就是前端里的“数据库”
前端·数据库
kong79069281 小时前
环境搭建-运行前端工程(Nginx)
前端·nginx·前端工程
成都证图科技有限公司1 小时前
Bus Hound概述
前端