分享親身經歷的一種詭異的create-react-app 3000端口被佔用的解決方法

我本機電腦狀況：

一、win7 32位
二、node版本12.13.0、npm版本6.14.2
三、react: "^16.13.1"、react-dom: "^16.13.1"、react-scripts: "3.4.1"
四、使用VSCode做爲代碼編輯器
五、曾安裝運行其餘koa、webpack項目，使用過"localhost、127.0.0.一、0.0.0.0"

我遇到的狀況：

一、第一次本機安裝並運行 create-react-app
二、運行npm run start，報3000端口被佔用的錯誤提醒：「Something is already running on port 3000」

我嘗試過網上搜索到的幾種解決方式：

一、查看誰在用3000端口，並結束該進程：netstat -ano
運行結果：在結果列表中根本就沒有3000端口的任何信息，那也沒法去結束該進程。

二、經過任務管理器，結束node進程，而後從新npm run start。
運行結果：當我結束當前已有的node進程樹後，只要運行VSCode，默認自動從新產生新的node進程，node進程永遠殺不完的(理論上不管react仍是webpack都是運行在node基礎之上，因此原本就不應殺死node進程)。

三、網上還有一種說法：VSCode的 vscode-browser-plugin插件默認佔用3000端口，難道是它？
檢查結果：本機VSCode根本就沒有安裝該插件

四、修改node_modules/reac-scripts/scripts.js中const HOST = process.env.HOST || '0.0.0.0'; 將'0.0.0.0'修改成'127.0.0.1'
運行結果：依然提示端口被佔用

五、更換端口："start": "set PORT=3001 && react-scripts start"(注：linux或macOS添加環境變量方式與windows不一樣)
運行結果：不管我修改端口號爲多少，都提示被佔用！

這就是我本機遇到詭異的地方！不管修改端口號多少，都提示被佔用，太過度了吧。

至此，網上能搜到的方式都試了一遍，都沒有解決端口被佔用的問題。

特別說明：上面的每一種解決方式當我嘗試解決失敗以後，我都將所作的修改恢復成最初狀態。

不放棄，繼續想辦法。

經過谷歌檢索，找到了一篇文章，提到解決辦法是須要修改本機hosts(C:\Windows\System32\drivers\etc\hosts)，添加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端口被佔用的事情。

回顧這個「詭異的解決過程」，簡單來講就是：

一、我嘗試了多種網上解決方式都沒成功。
二、我給hosts添加127.0.0.1 localhost、::1 localhost，再也不提示端口被佔用。
三、我再刪除hosts剛纔添加的2條記錄，再運行依然不提示端口被佔用。

上面的第2-第3步驟相互抵消，其實至關於什麼都沒作，而後端口占用問題居然解決了！

詭異，詭異，詭異。