Electron退出时如何彻底关闭React应用？

这个问题的核心原因是你的启动方式用了foreman（也就是nf start），它会同时启动react-start和electron-start两个独立进程——Electron主进程和React的webpack-dev-server是平级的，所以当你调用app.quit()或app.exit(0)时，只会关闭Electron自身，不会影响到React的服务器进程，导致3000端口一直处于监听状态。

下面提供两种可行的解决方案，你可以根据自己的需求选择：

方案1：在Electron退出时强制杀掉3000端口的进程 #

直接通过Windows命令找到占用3000端口的PID，然后强制终止它。你可以修改Electron主进程的closeApp监听代码：

const { exec } = require('child_process');
const { ipcMain, app } = require('electron');

ipcMain.on('closeApp', (evt, arg) => {
  // 查找占用3000端口的进程PID
  exec('netstat -ano | findstr :3000', (err, stdout) => {
    if (stdout) {
      // 提取PID（Windows下netstat输出的最后一列是PID）
      const pid = stdout.trim().split(/\s+/).pop();
      // 强制杀掉该进程
      exec(`taskkill /PID ${pid} /F`, (killErr) => {
        if (!killErr) {
          console.log('React开发服务器已关闭');
        }
        app.exit(0);
      });
    } else {
      // 如果没找到进程，直接退出Electron
      app.exit(0);
    }
  });
});

方案2：让Electron作为父进程启动React服务器 #

修改你的启动逻辑，不再依赖foreman，而是让Electron主进程来启动React的开发服务器，这样就能在Electron退出时主动关闭这个子进程。

步骤1：修改src/start-react.js #

让它用child_process.spawn启动React进程，并保存进程引用：

const { spawn } = require('child_process');

// 启动React开发服务器，shell:true适配Windows环境
module.exports = spawn('npm', ['run', 'react-start'], { 
  shell: true,
  stdio: 'inherit' // 让React的输出在控制台显示
});

步骤2：在Electron主进程中管理子进程 #

在你的Electron启动文件（比如start.js）中，引入这个React进程，并在退出时杀掉它：

const reactProcess = require('./src/start-react');
const { ipcMain, app } = require('electron');

// 在Electron准备退出前关闭React进程
app.on('before-quit', () => {
  if (reactProcess) {
    reactProcess.kill('SIGINT'); // 发送中断信号，让webpack-dev-server优雅退出
  }
});

// 处理closeApp事件
ipcMain.on('closeApp', (evt, arg) => {
  if (reactProcess) {
    reactProcess.kill('SIGINT');
  }
  app.exit(0);
});

步骤3：修改package.json的启动脚本 #

把原来的start脚本改成直接启动Electron：

"scripts": {
  "start": "electron .",
  // 其他脚本保持不变...
}

这样启动Electron时会自动拉起React服务器，退出时也会一并关闭它，彻底释放3000端口。

额外提示 #

• 方案1比较直接，但如果有其他进程意外占用3000端口，可能会误杀，适合开发环境临时用；
• 方案2更合理，通过进程父子关系管理，能确保React服务器和Electron生命周期一致，推荐长期使用。

内容的提问来源于stack exchange，提问作者I.K.