Vite+Electron如何将API目录作为子进程并实现正常打包？

问题 #

在主项目中新增了/api目录存放JS编写的API文件，开发模式下执行npm run dev可以正常运行，但执行npm run build:win打包后程序无法正常工作。当前核心代码如下：

import { app, shell, BrowserWindow, ipcMain } from 'electron'
import { fork } from 'child_process'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'

fork('api/main.js') //<- 仅在开发环境正常工作

function createWindow(): void {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 370,
    height: 600,
    show: false,
    autoHideMenuBar: true,
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
    }
  })
}

请问正确的文件引用方式是什么？是否需要添加配置将API目录包含到最终构建中？

解决方法 #

1. 修正文件引用路径 #

开发环境下直接用fork('api/main.js')能生效是因为当前工作目录是项目根目录，但打包后Electron的工作目录和文件结构会变化，必须用绝对路径定位文件。

结合Electron Toolkit的环境判断能力，区分开发/生产环境拼接正确路径：

import { app, shell, BrowserWindow, ipcMain } from 'electron'
import { fork } from 'child_process'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'

// 动态拼接API文件路径
const apiEntryPath = is.dev
  ? join(app.getAppPath(), 'api/main.js') // 开发环境：基于项目根目录定位
  : join(__dirname, '../api/main.js')    // 生产环境：基于打包后的资源目录定位

fork(apiEntryPath)

function createWindow(): void {
  // 窗口创建代码保持不变
}

2. 配置打包工具，将API目录纳入构建 #

默认情况下，electron-builder不会自动打包项目根目录下的自定义api目录，需要添加配置让打包工具将该目录复制到产物中：

方法1：在package.json中添加配置

{
  "build": {
    "extraResources": [
      {
        "from": "./api",
        "to": "api"
      }
    ]
  }
}

方法2：在electron-builder.yml中添加配置

extraResources:
  - from: ./api
    to: api

该配置会将项目根目录下的api目录完整复制到打包后的应用资源目录中，确保生产环境下能正确读取到API文件。

内容的提问来源于stack exchange，提问作者rafal g