Windows10运行npm start启动React项目提示端口3000被占用如何解决

1. 排查Windows系统预留端口问题（最高概率匹配你的报错场景） #

Windows10 系统开启Hyper-V、WSL2、容器相关服务后，会随机预留一段TCP端口，3000端口经常被纳入预留范围，该场景下没有实际用户进程占用端口，所以强制杀PID会提示权限不足。
验证方法：打开管理员权限PowerShell，执行以下命令：
netsh int ipv4 show excludedportrange protocol=tcp
查看输出的预留端口段中是否包含3000，如果存在可按以下步骤解决：

• 先关闭Hyper-V服务，执行命令后按提示重启电脑：
  dism.exe /Online /Disable-Feature:Microsoft-Hyper-V
• 重启后再次打开管理员PowerShell，手动将3000端口排除在系统预留范围外：
  netsh int ipv4 add excludedportrange protocol=tcp startport=3000 numberofports=1 store=persistent
• 如果你需要使用WSL2、Docker等依赖Hyper-V的服务，执行以下命令重新开启Hyper-V，执行后再次重启电脑即可：
  dism.exe /Online /Enable-Feature:Microsoft-Hyper-V /All

2. 修正端口查杀命令的使用错误 #

你之前执行的npx kill-port 300属于输入错误，漏写了端口末尾的0，正确命令如下，无需提前安装依赖，npx会自动拉取临时包执行：
npx kill-port 3000

3. 一劳永逸方案：修改React项目默认启动端口 #

如果不想调整系统配置，可以直接修改React项目的默认启动端口，避免和3000端口冲突：
打开React项目根目录的package.json文件，找到scripts配置项中的start字段，将默认的：
"start": "react-scripts start"
修改为：
"start": "set PORT=4000 && react-scripts start"
后续执行npm start会默认使用4000端口启动，不会再触发3000端口占用报错。

4. 注意Express项目的修改生效范围 #

你将Express监听端口改为4200后推送到Heroku，仅会影响线上部署的服务，不会修改你本地运行的Express服务的端口。如果本地仍在运行旧版Express项目，需要本地修改app.js的监听端口后重启本地Express服务，才能释放本地的3000端口。

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