React项目编译成功但换端口仍无法在localhost访问如何排查

你提到的npm peer dependency警告确实不会阻塞服务正常启动，不需要在这部分耗费精力，按以下优先级逐步排查即可：

• 先确认服务是否真的在目标端口正常监听
  不要完全依赖终端输出的「编译成功」提示，直接通过系统命令校验端口状态：
  Windows 环境执行：netstat -ano | findstr "你测试过的3000 80 4500端口"
  macOS/Linux 环境执行：lsof -i :3000 -i :80 -i :4500
  重点看两个信息：一是对应端口有没有处于LISTENING状态的进程，如果没有，说明dev server实际启动失败，终端的成功提示是缓存或者进程假死导致的；二是监听地址如果是127.0.0.1，那用本机局域网IP是必然访问不了的，只有监听地址为0.0.0.0时才能通过IP访问。
• 校验本地host与服务绑定配置
  检查系统hosts文件：Windows路径为C:\Windows\System32\drivers\etc\hosts，macOS/Linux路径为/etc/hosts，确认文件中存在127.0.0.1 localhost的映射，没有被其他软件篡改指向异常地址。
  如果是create-react-app搭建的项目，检查package.json里的start脚本，有没有手动配置过HOST参数——很多人之前为了移动端联调把HOST绑定到了旧的局域网IP，IP变动后就会出现编译成功但所有地址都访问不了的问题，这种情况直接删除HOST配置，或者显式设置为0.0.0.0再重启服务即可。
• 排查端口拦截与权限问题
  临时关闭本地运行的代理、VPN、第三方杀毒软件、系统防火墙，这类工具经常会静默拦截本地端口请求，尤其是你测试过的80端口属于系统特权端口，Windows环境下没有管理员权限启动服务的话，哪怕终端提示启动成功，实际也拿不到80端口的访问权限，根本无法响应请求。
  测试时优先选1024以上的非保留端口，比如8080、3001，启动时显式指定端口避免配置不生效：Windows cmd环境执行set PORT=8080 && npm start，macOS/Linux环境执行PORT=8080 npm start。访问时打开浏览器F12开发者工具切到网络面板，看请求具体报错：连接被拒、连接超时、返回4xx/5xx错误对应的问题根源完全不同，不要笼统归为「访问失败」。
• 排除缓存与配置异常
  如果近期修改过webpack配置、react-scripts配置或者第三方构建配置，先删除node_modules目录和lock文件，重新执行npm install安装完整依赖，排除依赖损坏、构建缓存导致的假启动问题。
  注意区分「服务连不上」和「页面加载白屏」：如果浏览器能连上服务但返回的HTML执行报错，也会看起来像页面加载失败，这时候要去浏览器的JS控制台看报错，不是看启动服务的终端输出。

注意：每次更换端口测试前，先把之前启动的node进程全部杀掉，避免多进程残留导致新启动的服务实际没绑定到你指定的端口，做无用排查。

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