前端開發環境 port 被佔用

前端假設像使用 Vue 、打包工具為 Vite 的時候，在本地端 npm run dev 啟了一個開發環境，用 http://localhost:5173 可以在瀏覽器開啟網站。

但手上有多個專案時，若沒有特別注意，有些開發環境都是用同一個 5173 port，即便第一個 5173 已經在終端機終止了，但要開第二個的時候，發現顯示出來的還是第一個網站，無法切換到第二個。

確實清除的方式

會有這個情況是，第一個 port 5173 的網站其實沒有完全結束，他還佔用著 5173，瀏覽器因為快取的關係，會還記著舊的伺服器。

1. 這時候需要去確認 port 是不是真的還被佔用，在 windows 的 power shell 或命令提示字元輸入以下指令。

netstat -ano | findstr :5173

輸入指令後，如果有出現內容的話，表示確實 port 依然被佔用

如圖可看出 5173 的 port 目前被佔用中

2. 取得 5173 這一行的最後一個數字，這邊就是 12780，然後再輸入以下指令。這時候會看到顯示出一個 node.exe，表示現在是 node.exe 在佔用。

tasklist | findstr "12780"

3. 到工作管理員中 > 詳細資料 (windows 11)，找到 PID 是 12780 的 node.exe 結束工作。

4. 重新啟動專案就可以看到清除舊的囉。

參考資料

• Vue 項目啟用端口被佔用