大家好！今天我們來(lái)聊聊一個(gè)在 Vue 開(kāi)發(fā)中經(jīng)常遇到的“攔路虎”——端口占用問(wèn)題。你有沒(méi)有遇到過(guò)這種情況：當(dāng)你滿懷期待地輸入 npm run serve，準(zhǔn)備啟動(dòng) Vue 項(xiàng)目時(shí)，突然蹦出一堆紅色錯(cuò)誤信息，其中最顯眼的就是 EADDRINUSE？

別慌！今天我們就來(lái)深入分析這個(gè)問(wèn)題，并手把手教你如何解決它。無(wú)論你是新手還是老手，這篇文章都能幫你輕松搞定端口占用問(wèn)題！

一、錯(cuò)誤場(chǎng)景還原

假設(shè)你正在開(kāi)發(fā)一個(gè) Vue 項(xiàng)目，輸入 npm run serve 后，終端突然報(bào)錯(cuò)：

Error: listen EADDRINUSE: address already in use 0.0.0.0:8080

接著是一堆堆棧信息和 npm 的錯(cuò)誤日志。你的心情可能瞬間從“期待”變成了“崩潰”。
報(bào)錯(cuò)全文：

C:\Users\Desktop\web\ems-web\node_modules\webpack-dev-server\lib\Server.js:2557
        throw error;
        ^

Error: listen EADDRINUSE: address already in use 0.0.0.0:8080
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at doListen (net.js:1503:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '0.0.0.0',
  port: 8080
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ems-web@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ems-web@0.1.0 serve script.
can be found in:
npm ERR!     C:\Users\xuhui\AppData\Roaming\npm-cache\_logs\2025-03-10T01_42_02_293Z-debug.log

錯(cuò)誤信息解析：

• EADDRINUSE：這是一個(gè)常見(jiàn)的網(wǎng)絡(luò)錯(cuò)誤，表示“地址已被占用”。
• 0.0.0.0:8080：這是 Vue 開(kāi)發(fā)服務(wù)器默認(rèn)使用的端口號(hào)。錯(cuò)誤表明 8080 端口已經(jīng)被其他進(jìn)程占用了。

二、為什么會(huì)出現(xiàn)這個(gè)問(wèn)題？

在開(kāi)發(fā)過(guò)程中，端口占用問(wèn)題通常有以下幾種原因：

1. 其他 Vue 項(xiàng)目正在運(yùn)行：你可能同時(shí)打開(kāi)了多個(gè) Vue 項(xiàng)目，而它們都試圖使用 8080 端口。
2. 其他服務(wù)占用了端口：比如本地運(yùn)行的 Java 服務(wù)、Node.js 服務(wù)或其他應(yīng)用程序。
3. 上次關(guān)閉項(xiàng)目時(shí)端口未釋放：有時(shí)系統(tǒng)可能沒(méi)有完全釋放端口，導(dǎo)致再次啟動(dòng)時(shí)沖突。

三、解決方案：三步搞定端口占用

接下來(lái)，我們分三步來(lái)解決這個(gè)問(wèn)題。無(wú)論你是 Windows、Mac 還是 Linux 用戶，都能找到適合自己的方法！

方法 1：找到并終止占用端口的進(jìn)程

Windows 用戶：

打開(kāi)命令提示符（CMD）。

輸入以下命令，查找占用 8080 端口的進(jìn)程 ID（PID）：

netstat -ano | findstr :8080

你會(huì)看到類似以下的輸出：

TCP    0.0.0.0:8080            0.0.0.0:0              LISTENING       1234

其中 1234 就是占用端口的進(jìn)程 ID。

使用以下命令終止該進(jìn)程：

taskkill /PID 1234 /F

注意：/F 表示強(qiáng)制終止進(jìn)程。

Mac/Linux 用戶：

打開(kāi)終端。

輸入以下命令，查找占用 8080 端口的進(jìn)程：

lsof -i :8080

你會(huì)看到類似以下的輸出：

COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node     1234 user   20u  IPv4 123456      0t0  TCP *:http-alt (LISTEN)

其中 1234 就是占用端口的進(jìn)程 ID。

使用以下命令終止該進(jìn)程：

kill -9 1234

方法 2：更改 Vue 項(xiàng)目的端口號(hào)

如果你不想終止其他進(jìn)程，或者你希望保留當(dāng)前運(yùn)行的服務(wù)，可以通過(guò)修改 Vue 項(xiàng)目的配置文件來(lái)更改端口號(hào)。

操作步驟：

找到項(xiàng)目根目錄下的 vue.config.js 文件。如果該文件不存在，可以在根目錄創(chuàng)建一個(gè)。

在 vue.config.js 文件中添加或修改如下內(nèi)容：

module.exports = {
  devServer: {
    port: 3000  // 將 8080 更改為你希望使用的端口號(hào)
  }
};

這里我們將端口號(hào)改為 3000，你可以根據(jù)需要選擇其他端口。

保存文件并重新啟動(dòng)項(xiàng)目：

npm run serve

方法 3：清除 npm 緩存

有時(shí)，npm 緩存中的一些問(wèn)題也可能導(dǎo)致開(kāi)發(fā)服務(wù)器無(wú)法啟動(dòng)。你可以嘗試清除 npm 緩存并重新安裝依賴：

清除 npm 緩存：

npm cache clean --force

重新安裝依賴：

npm install

再次嘗試啟動(dòng)項(xiàng)目：

npm run serve

四、重啟項(xiàng)目大法

重啟項(xiàng)目，項(xiàng)目可能會(huì)重新選擇一個(gè)端口，就不會(huì)有端口占用問(wèn)題。

無(wú)論你選擇哪種方法，都能讓你從“端口占用”的泥潭中解脫出來(lái)，繼續(xù)愉快地開(kāi)發(fā) Vue 項(xiàng)目！

小貼士：

• 如果你經(jīng)常遇到端口沖突問(wèn)題，可以養(yǎng)成習(xí)慣，每次啟動(dòng)項(xiàng)目前檢查端口占用情況。
• 使用 vue.config.js 自定義端口號(hào)時(shí)，記得選擇一個(gè)不常用的端口，避免與其他服務(wù)沖突。

以上就是Vue項(xiàng)目啟動(dòng)時(shí)的端口占用問(wèn)題分析與解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue啟動(dòng)時(shí)端口占用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論