VS Code终端中React+MongoDB+NodeJS+Express项目无法重启问题咨询

前置结构确认 #

• 基于React、MongoDB、NodeJS、Express的项目基本都是前后端分离结构，通常根目录下会有client（React前端代码）、server（Express后端代码）两个独立文件夹，两个文件夹内各自有独立的package.json配置文件。如果根目录没有配置聚合启动脚本，直接在根目录执行npm start或者空执行npm run必然启动失败。
• 先在VS Code终端切到项目根路径，Windows执行dir、Mac/Linux执行ls，确认目录结构符合预期，不要盲目敲命令。

基础环境排障 #

• 补全依赖：分别在根目录、client目录、server目录执行npm install，依赖缺失是启动失败的最高频原因。如果安装时报权限错误，Windows用管理员权限重启VS Code再操作，Mac/Linux在命令前加sudo即可。
• 确认MongoDB运行状态：
  • 本地部署MongoDB的用户：Windows打开服务管理器找到MongoDB服务手动启动；Mac执行brew services start mongodb-community；Linux执行sudo systemctl start mongod
  • 用MongoDB云服务的用户：打开项目内的.env文件，检查MONGO_URI连接串是否正确，本地IP是否加入云服务的访问白名单。
• 清理残留端口占用：之前运行的项目进程没正常退出会占住默认端口（React默认3000、Express默认5000/8080），导致新进程启动失败，执行对应命令杀进程即可：
  • Windows：分别执行netstat -ano | findstr :3000、netstat -ano | findstr :5000拿到占用端口的进程PID，再执行taskkill /F /PID 你查到的PID号
  • Mac/Linux：分别执行lsof -i :3000、lsof -i :5000拿到占用端口的进程PID，再执行kill -9 你查到的PID号

正确启动操作 #

• 分终端启动模式（适配绝大多数未配置聚合脚本的项目）：
  1. 开第一个VS Code终端，切到server目录，执行npm start，如果后端配置了nodemon热重载就执行npm run dev（具体看server目录下package.json里scripts字段的配置，不要跑未定义的命令），启动成功终端会打印MongoDB连接成功、服务监听端口的日志。
  2. 开第二个VS Code终端，切到client目录，执行npm start，等待React编译完成后会自动打开浏览器访问前端页面。
• 聚合脚本启动模式：如果根目录的package.json里配置了concurrently并行启动脚本，类似如下配置：

"scripts": {
  "server": "nodemon server/index.js",
  "client": "npm start --prefix client",
  "dev": "concurrently \"npm run server\" \"npm run client\""
}

直接在根目录执行npm run dev就能同时拉起前后端服务。
注意：npm run后面必须跟scripts字段里明确定义的脚本名，空执行不会触发任何启动逻辑。

高频报错快速处理 #

• 报Module not found错误：对应目录下重新执行npm install，如果是单个依赖缺失就单独安装，比如缺axios就执行npm install axios。
• 报MongoDB连接错误：优先检查Mongo服务是否启动，再核对.env里的连接串、账号密码是否正确，密码里有特殊字符的要做URL转义。
• 报React编译错误：直接看终端打印的错误行号，大概率是导入路径写错、JSX语法错误，修改后保存会自动热重载，不需要手动重启服务。
• 报奇怪的依赖兼容/权限错误：删掉对应目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再启动。

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