📌如何在 Windows 環境中快速預覽 Vue 打包後的 dist 靜態檔案：四大簡易方法

前言

當你使用 Vue CLI 或 Vite 打包專案後，會在專案根目錄產生一個 dist（或 build）資料夾，裡面裝的就是可以直接對外提供的靜態檔案（HTML、JS、CSS、資源檔）。
如果直接以檔案總管打開 index.html（file:// 協議），常常會遇到 AJAX 請求失敗、路由無法跳轉等問題。
本文將針對 不熟悉後端伺服器 的朋友，介紹四種在 Windows 環境下，快速預覽 Vue 打包後 dist 資料夾的靜態伺服器解決方案。

---

1. 解決 PowerShell 執行原則：用 serve

問題

在 PowerShell 執行 npm install -g serve 或 npm -v，出現：

npm : 因為這個系統已停用指令碼執行，所以無法載入 C:\Program Files\nodejs\npm.ps1。

原因

Windows PowerShell 預設對 .ps1 執行有安全限制（ExecutionPolicy），擋掉了 npm 的啟動腳本。

步驟

1. 以「系統管理員」身份 開啟 PowerShell

2. 設定執行原則為 RemoteSigned（允許本機腳本執行）：

   Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
   

3. 重啟 PowerShell，驗證 Node.js 與 npm：

         node -v   # 應顯示版本號，例如 v22.17.1
         npm -v    # 應顯示版本號    

4. 切換到專案的 dist 資料夾，安裝並啟動 serve：

       cd C:\path\to\your\project\dist
       npm install -g serve
       serve -s .    

5. 在瀏覽器開啟 http://localhost:3000 即可預覽。

---

2. 切換到原生 CMD：跳過 PowerShell 限制

如果不想改 PowerShell 執行原則，可以直接用 Windows 內建的命令提示字元 (CMD)：

1. 開啟「命令提示字元」（Win + R → 輸入 cmd → Enter）

2. 在 CMD 執行：

       npm -v
       npm install -g serve
       cd C:\path\to\your\project\dist
       serve -s .    

3. 瀏覽器打開 http://localhost:3000。

---

3. 最小依賴：Python 內建 HTTP 伺服器

如果你不想多安裝 Node.js 套件，只要在電腦上安裝 Python 3.x，就能用最簡單的方式開啟靜態檔。

1. 安裝 Python 3（若已安裝可跳過）

2. 在 PowerShell 或 CMD 切到 dist 資料夾：

       cd C:\path\to\your\project\dist
   	python -m http.server 8000    

3. 開啟瀏覽器 → http://localhost:8000

優點：零額外套件、啟動快速

缺點：不支援 Vue Router history 模式的自動 fallback，路由可能 404。

---

4. 圖形化介面：VS Code + Live Server

對於習慣用 Visual Studio Code 的朋友，可透過 Live Server 外掛輕鬆啟動靜態伺服器：

1. 安裝 Visual Studio Code

2. 在 VS Code 裝入 Live Server 外掛

3. 用 VS Code 開啟專案的 dist 資料夾

4. 於 index.html 上點右鍵 → Open with Live Server

5. VS Code 會自動在預設瀏覽器打開預覽頁面

---

小結

方案	依賴	支援 SPA history	推薦族群
PowerShell＋serve	Node.js、serve	是	需要正式模擬伺服器行為的開發者
CMD＋serve	Node.js、serve	是	不想改 PowerShell 設定的使用者
Python http.server	Python 3	否	只想快速看靜態頁面的初學者
VS Code Live Server	VS Code + 外掛	是	喜歡 GUI 操作的開發者

透過以上四種方法，你可以在 Windows 環境下快速預覽 Vue 打包後的 dist 靜態檔，不需額外架設複雜伺服器，即可驗證是否打包成功並調試前端路由行為。挑選最符合自己需求的方式，就能一步到位！