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 环境变量的设置流程就全部梳理完毕了。

相关推荐
lilye668 分钟前
精益数据分析(38/126):SaaS模式的流失率计算优化与定价策略案例
前端·人工智能·数据分析
5:0031 分钟前
Qt:(创建项目)
java·前端·qt
green_pine_34 分钟前
CSS学习笔记12——CSS3新增特性
前端·css·笔记·学习
Wenhao.1 小时前
Go-web开发之帖子功能
开发语言·前端·golang
蓝婷儿1 小时前
前端面试每日三题 - Day 22
前端·面试·职场和发展
java1234_小锋1 小时前
如何配置NGINX作为反向代理服务器来缓存后端服务的响应?
前端·nginx·缓存
A_aspectJ1 小时前
【Bootstrap V4系列】学习入门教程之 表格(Tables)和画像(Figure)
前端·bootstrap·dreamweaver
同聘云1 小时前
腾讯云web服务器配置步骤是什么?web服务器有什么用途?
服务器·前端·腾讯云
巴巴_羊1 小时前
CSS八股 3
前端·css
前后端杂货铺2 小时前
uniapp利用生命周期函数实现后台常驻示例
android·前端·ios·微信小程序·uni-app