如何在無網路環境中部署 Vue 3 前端專案並使用 serve 啟動 — 完整圖文教學

對於企業內部、封閉式網路環境或沒有外網權限的開發環境，要在無網路情況下部署 Vue 3 專案並啟動 dist 靜態頁面，會遇到不少困難。這篇文章將一步步教你 如何打包 serve 並離線部署，讓你在內網也能順利開啟 Vue 頁面。

---

💡 為什麼不能直接 npx serve -s dist？

在無網路環境中執行 npx serve 或 npm install serve 時會報錯：

1. npm ERR! code ETIMEDOUT
2. npm ERR! network request to https://registry.npmjs.org failed

原因是 npm 嘗試從外部網路拉取套件，但受限於防火牆或網路設定失敗。

---

✅ 解法總覽：離線打包 serve

我們的策略是：

1. 在可連網電腦上安裝並打包 serve。

2. 將整個資料夾移到無網路電腦。

3. 在本地離線執行 serve 來啟動 Vue 3 的 dist。

---

🖥 步驟 1：在可連網電腦打包 serve

1. # 建立一個資料夾
2. mkdir serve_offline
3. cd serve_offline
5. # 安裝 serve
6. npm install serve

接著打包成壓縮檔，便於傳輸：

1. tar -czvf serve_offline.tar.gz node_modules package.json package-lock.json

你會得到一個 serve_offline.tar.gz 檔案。

---

💾 步驟 2：傳輸到無網路電腦

使用 USB 或內網分享，把 serve_offline.tar.gz 移到無網電腦上。

---

📦 步驟 3：在無網路電腦解壓並安裝

# 解壓縮
tar -xzvf serve_offline.tar.gz
# 進入資料夾並進行離線安裝
cd serve_offline
npm install --offline


🚀 步驟 4：啟動 Vue 3 的 dist 頁面
請確認你的 dist 是 Vue build 出來的靜態頁面資料夾。
接著啟動：

npx serve -s C:\Users\admin\Downloads\vue-dist --single

或直接用 Node 路徑方式執行：

1. node node_modules/serve/build/main.js -s C:\Users\admin\Downloads\vue-dist --single

🔁 如果你之前開過 serve，想要重新啟動，可以用：

1. Ctrl + C # 停止服務
2. Y # 確認

若沒反應，可找出 process 並強制關閉：

1. netstat -ano | findstr :3000
2. taskkill /PID <找到的PID> /F

🧪 驗證畫面是否正常

• 使用本機訪問：

  http://localhost:3000
  

• 使用區網 IP 訪問（適用多人共享）：
  http://<你的內網IP>:3000

🔒 如果出現「目錄索引」，而不是 Vue 網頁：

1. 你可能指向錯誤資料夾，請確保是 dist 本身。

2. 使用 --single 可解決 Vue Router history 模式的路由問題。

---

🧯 如果防火牆阻擋了 3000 port

執行以下指令允許流量通過：

netsh advfirewall firewall add rule name="Allow Serve 3000" dir=in action=allow protocol=TCP localport=3000

🧩 結語

這篇文章教你在「無網路」環境中：

• 打包並安裝 serve

• 離線啟動 Vue 3 靜態頁面

• 排除 serve 路由與連線問題

適用於 企業內網部署、離線系統測試、封閉環境安裝 的超實用技巧 💪