Electron-vite中ELECTRON_RENDERER_URL环境变量如何被设置的

近期我专注于前端技术栈 Electron 与 Vue3 的学习实践,依照教程网站 快速开始 | electron-vite 的快速入门指引,搭建了一个示例项目。成功完成项目下载,并通过 npm run dev 命令启动项目后,在研读项目 main 目录下的 index.ts 文件时,发现 mainWindow.loadURL 方法中使用的 ELECTRON_RENDERER_URL 环境变量来源不明。查阅 GitHub 上的相关 Issue,得知该变量与 Vite 的 Server 配置有关,但关于其默认值设置方式及端口修改方法却鲜有说明,由此开启了深入探究之旅。

通过分析 npm run dev 命令的执行逻辑,发现其会读取 package.json 文件中 scripts 字段下的 dev 属性,并执行对应的命令 electron-vite dev 完成项目启动。显然,electron-vite 是关键执行指令,于是我在 node_modules 目录中找到 electron-vite/bin/electron-vite.js 文件。进一步追踪发现,该文件导入了 ../dist/cli.mjs 代码。在 cli.mjs 中定位到 dev 命令的解析逻辑,发现其通过配置项创建了一个 Server。为深入了解该过程,我继续跟进到 lib-RSvVeUu6.mjs 文件中的 createServer 方法,试图从中找到 ELECTRON_RENDERER_URL 环境变量的相关线索 。

由于端口关联着渲染进程,所以我直接定位到解析渲染选项的位置。

至此,我们已经找到了设置 ELECTRON_RENDERER_URL 环境变量的位置。接下来,只需找出 port 参数的设置之处。 往上查看代码可知,port 存在于 conf 之中,而 conf 又处于 server.config.server 里。所以,接下来的重点在于探究 server 的创建过程。 点击 createServer$1 后,跳转至该方法的声明处,却未找到具体实现。既然如此,我们就通过调试模式,以单步调试的方式来探寻具体实现。

找到了具体的实现代码,进去一探究竟。

server通过config来的,我们去看上一步的resolveConfig函数

此处的 config 内容实际上对应着 electron.vite.config.ts 文件中的内容,具体来说就是 renderer 里的对象内容。不过,这个对象里并没有 server 属性。因此,接下来我们要进一步探究 resolveServerOptions 函数是如何对其进行解析的。

通过对解析代码的查看,我们发现虽然构建了一个 server 对象,然而其中并未包含与 port 相关的内容。由此可见,createServer 方法并未设置默认端口。接下来,我们只能进一步查看在创建完 server 之后所调用的 listen 函数了。

进入到startServer函数中。

我们可以看到,当 port 属性未进行配置时,采用了默认值 5173。 至此,ELECTRON_RENDERER_URL 环境变量的设置流程就全部梳理完毕了。

相关推荐
Lhuu(重开版5 分钟前
Vue:axios(GET请求)
前端·javascript·vue.js
万物更新_18 分钟前
HTML-前端
前端·html
sg_knight39 分钟前
Flutter跨平台通信实战|3步打通Android原生能力,实现底层API调用!
android·前端·javascript·flutter·跨平台·web·双向通信
yz-俞祥胜2 小时前
【疑难杂症】Vue前端下载文件无法打开 已解决
前端·javascript·vue.js
TE-茶叶蛋2 小时前
前端错误监听与上报框架工作原理,如:Sentry
前端·javascript·sentry
漫谈网络2 小时前
TypeScript 和 JavaScript核心关系及区别
前端·javascript·typescript
aiweker2 小时前
python web 开发-Flask-Login使用详解
前端·python·flask
m0_679927203 小时前
练习小项目7:天气状态切换器
前端·javascript·css·html
OK_boom3 小时前
React-改变当前页class默认的样式
前端·javascript·react.js
哎呦你好3 小时前
【background】CSS 背景全解析:从基础属性到视觉魔法
前端·css·人工智能·python