执行npm run dev打开错误React应用，需同时启动前后端加载正确页面

问题定位 #

你的问题核心是npm run dev启动时前端项目的执行路径存在歧义，或端口冲突导致前端启动了新的空白实例，而非你预期的client目录下的项目。

具体修复步骤 #

1. 明确前端启动路径 #

修改server端package.json的client命令，强制进入client目录后启动前端，彻底避免路径混淆：

"scripts": {
  "start": "react-scripts start",
  "server": "nodemon server",
  "client": "cd client && npm start",
  "dev": "npx concurrently \"npm run server\" \"npm run client\""
}

2. 规避端口冲突 #

确保后端服务使用非3000端口（React默认启动端口），在你的server.js中指定端口：

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. 强制前端固定3000端口 #

如果前端频繁自动切换端口，在client目录的package.json中添加端口强制配置：

• 跨平台方案（需先安装依赖：npm install --save-dev cross-env）：

"scripts": {
  "start": "cross-env PORT=3000 react-scripts start"
}

• Windows单独方案：

"scripts": {
  "start": "set PORT=3000 && react-scripts start"
}

• macOS/Linux单独方案：

"scripts": {
  "start": "PORT=3000 react-scripts start"
}

4. 清理根目录冗余文件 #

检查server端所在的根目录，若存在public、src等React默认文件夹，删除或重命名，避免和client目录的项目产生混淆。

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