分享亲身经历的一种诡异的create-react-app 3000端口被占用的解决方法

我本机电脑情况：

1、win7 32位
2、node版本12.13.0、npm版本6.14.2
3、react: "^16.13.1"、react-dom: "^16.13.1"、react-scripts: "3.4.1"
4、使用VSCode作为代码编辑器
5、曾安装运行其他koa、webpack项目，使用过"localhost、127.0.0.1、0.0.0.0"

我遇到的情况：

1、第一次本机安装并运行 create-react-app
2、运行npm run start，报3000端口被占用的错误提醒：“Something is already running on port 3000”

我尝试过网上搜索到的几种解决方式：

1、查看谁在用3000端口，并结束该进程：netstat -ano
运行结果：在结果列表中根本就没有3000端口的任何信息，那也无法去结束该进程。

2、通过任务管理器，结束node进程，然后重新npm run start。
运行结果：当我结束当前已有的node进程树后，只要运行VSCode，默认自动重新产生新的node进程，node进程永远杀不完的(理论上无论react还是webpack都是运行在node基础之上，所以本来就不该杀死node进程)。

3、网上还有一种说法：VSCode的 vscode-browser-plugin插件默认占用3000端口，难道是它？
检查结果：本机VSCode根本就没有安装该插件

4、修改node_modules/reac-scripts/scripts.js中const HOST = process.env.HOST || '0.0.0.0'; 将'0.0.0.0'修改为'127.0.0.1'
运行结果：依然提示端口被占用

5、更换端口："start": "set PORT=3001 && react-scripts start"(注：linux或macOS添加环境变量方式与windows不同)
运行结果：无论我修改端口号为多少，都提示被占用！

这就是我本机遇到诡异的地方！无论修改端口号多少，都提示被占用，太过分了吧。

至此，网上能搜到的方式都试了一遍，都没有解决端口被占用的问题。

特别说明：上面的每一种解决方式当我尝试解决失败之后，我都将所做的修改恢复成最初状态。

不放弃，继续想办法。

通过谷歌检索，找到了一篇文章，提到解决办法是需要修改本机hosts(C:WindowsSystem32driversetchosts)，添加2条记录：127.0.0.1 localhost、::1 localhost

照着这个方法修改后再运行npm run start。
终于不再提示3000端口被占用，顺利启动成功！

然后...我就以为这是解决办法...瞎一通总结还分享给了群好友。

我突然有个疑问，我本机hosts以前没有配置127.0.0.1 localhost，那我之前运行node项目或webpack项目，为啥用localhost或127.0.0.1都可以访问呢？

于是我就带着试验的心态，重新把本机hosts中刚添加的2条127.0.0.1 localhost、::1 localhost删除掉，再次重启VSCode，再次重新运行npm run start

结果....竟然没问题，不提示端口被占用，顺利启动3000端口。

目瞪口呆.jpg

反复试验几次，每次都是顺利启动的。

就好像我从来不曾发生过3000端口被占用的事情。

回顾这个“诡异的解决过程”，简单来说就是：

1、我尝试了多种网上解决方式都没成功。
2、我给hosts添加127.0.0.1 localhost、::1 localhost，不再提示端口被占用。
3、我再删除hosts刚才添加的2条记录，再运行依然不提示端口被占用。

上面的第2-第3步骤相互抵消，其实相当于什么都没做，然后端口占用问题竟然解决了！

诡异，诡异，诡异。