近期我专注于前端技术栈 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 环境变量的设置流程就全部梳理完毕了。