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);
}
相关推荐
sniper_fandc8 小时前
Vue Router路由
前端·javascript·vue.js
excel8 小时前
为什么 Vue 组件中的 data 必须是一个函数?(含 Vue2/3 对比)
前端
妄小闲8 小时前
成品网站模板源码 网站源码模板 html源码下载
前端·html
知识分享小能手16 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf16 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊17 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel17 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_4462608517 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室18 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart18 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart