Electron构建后执行npm run dev出现ERR_CONNECTION_REFUSED错误

核心问题 #

你的dev脚本逻辑存在错误：只在等待3000端口就绪，但没有启动React开发服务器，导致Electron启动后找不到可连接的服务，最终抛出ERR_CONNECTION_REFUSED。

修复方案 #

1. 修改package.json的scripts配置 #

将dev脚本改为同时启动React开发服务器和Electron，并用wait-on确保React服务完全就绪后再启动Electron：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "dev": "concurrently -k \"npm:start\" \"wait-on http://localhost:3000 && npm:electron\"",
  "electron": "cross-env NODE_ENV=development electron .",
  "electron:package:mac": "yarn build && electron-builder -m -c.extraMetadata.main=build/electron.js",
  "electron:package:win": "yarn build && electron-builder -w -c.extraMetadata.main=build/electron.js",
  "electron:package:linux": "yarn build && electron-builder -l -c.extraMetadata.main=build/electron.js"
},

关键说明：

• concurrently -k：同时运行多个命令，且当其中一个命令终止时自动杀掉其他进程
• wait-on http://localhost:3000：等待React开发服务器完全就绪（比单纯监听TCP端口更可靠）
• cross-env NODE_ENV=development：强制Electron运行在开发环境，避免isDev判断逻辑出错

2. 安装必要依赖 #

确保已安装脚本中用到的开发依赖：

npm install concurrently wait-on cross-env --save-dev

额外排查步骤 #

1. 单独验证React服务：执行npm start，确认浏览器能正常访问http://localhost:3000，排除React项目本身的启动问题
2. 清理依赖缓存：如果React服务无法启动，尝试删除node_modules、package-lock.json（或yarn.lock），重新执行npm install
3. 确认isDev判断逻辑：检查代码中isDev的取值是否正确，建议直接通过process.env.NODE_ENV === 'development'进行判断

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