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);
}
相关推荐
珑墨1 分钟前
【Turbo】使用介绍
前端
军军君0133 分钟前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
打小就很皮...2 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
wuhen_n2 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon2 小时前
理解vue中的ref
前端·javascript·vue.js
落霞的思绪4 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q4 小时前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz4 小时前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
Exquisite.5 小时前
Nginx
服务器·前端·nginx
打小就很皮...5 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit