🌐Vue 打包後的 dist 怎麼跑？新手也能懂的 3 種方式（本機測試到上線部署一次搞懂）
前言：為什麼 Vue 的 dist 不能「直接點開」？
很多新手第一次打包 Vue 專案後，會看到產生一個資料夾叫 dist，直覺就會想：
「我雙擊 index.html 不就好了嗎？」
結果打開後可能是空白頁、功能壞掉、或切換頁面就 404。
原因很簡單：
dist 是一包「靜態檔案」（HTML/CSS/JS/圖片），它需要一個「伺服器」把檔案用正確方式送到瀏覽器，才能正常運作。
你可以把 dist 想成：
-
✅ 已經印好的傳單（內容都有了）
-
❌ 但還沒有人幫你發到路人手上
「伺服器」就是那個幫你發傳單的人。
一、最推薦：用「一鍵啟動」的本機靜態伺服器（新手最快）
這個方法適合：
-
你只是想在自己電腦上確認 dist 是否正常
-
想快速讓同事在同一台電腦或同網段測試
做法（範例指令）
-
進到 dist 所在的資料夾（或專案根目錄也可以）
-
使用一個靜態伺服器工具啟動
例如用
npx
直接跑一個輕量伺服器（不需要全域安裝）：
npx lite-server --baseDir="dist"
完成後通常會出現一個網址，例如：
-
http://localhost:xxxx
你用瀏覽器打開那個網址，就能看到打包後的成果。
這方法的優點
-
上手最快
-
適合「我只想確認 dist 能不能跑」這種需求
-
不需要懂部署
二、Windows 也能超簡單：用內建環境快速開一個網站
如果你在 Windows 上，不想裝太多工具，也可以用「現成就有的環境」開一個簡單網站。
做法（示意）
-
把命令列切到 dist 目錄
-
用某個內建方式啟動簡易 Web Server
（例如你電腦有安裝常見開發環境，通常都能做到）
概念重點是：
-
讓瀏覽器用
http://...的方式打開 -
不要用
file:///.../index.html直接開檔
三、正式上線（公司/對外）：用 Nginx 或 IIS 才是標準做法
如果你的 dist 要放到：
-
公司內部伺服器
-
雲端主機
-
需要給客戶或同事大量使用
那就不是「本機跑跑看」等級，而是「正式部署」。
這時常見有兩條路：
1) Linux 伺服器：Nginx 最普遍
優點：
-
穩定、效能好
-
前端部署的業界標準答案之一
部署流程概念是：
-
把 dist 上傳到伺服器指定目錄
-
設定 Nginx 將網站根目錄指到 dist
-
加上「重新整理不 404」的 SPA 支援
2) Windows 伺服器：IIS 很常見
如果公司環境偏 Windows：
-
IIS 也能部署 dist
-
同樣要設定「路由回到 index.html」避免刷新 404
四、為什麼「重新整理會 404」？（Vue Router 新手最常踩）
很多 Vue 專案是單頁應用（SPA），意思是：
-
點「頁面切換」其實不是去伺服器要新頁面
-
而是前端在瀏覽器裡自己切換畫面
所以當你在
/report 這種網址按重新整理時：
-
瀏覽器會真的去伺服器問：「有沒有 /report 這個檔案？」
-
伺服器如果只會找實體檔案，就會回你 404
正確作法是：
-
不管你輸入什麼路徑
-
伺服器都要回傳
index.html -
讓 Vue 接手判斷要顯示哪個畫面
這就是為什麼正式部署時，需要做「SPA fallback」設定。
五、快速自我檢查清單（10 秒判斷你是哪種問題）
✅ 打開是空白頁
常見原因：
-
專案部署在子路徑，但打包路徑設定不對
-
靜態資源路徑（JS/CSS）載入失敗
✅ 可打開首頁，但換頁或刷新就 404
常見原因：
-
伺服器沒有做 SPA fallback
-
Vue Router 使用 history 模式但伺服器沒設定
✅ 首頁正常，但 API 全部壞掉
常見原因：
-
前端呼叫後端的網址在正式環境不同
-
環境變數沒有區分 development / production
結語：你該用哪一種方式？
如果你現在只是想確認 dist 能不能跑：
-
✅ 本機測試：用「快速靜態伺服器」最省事
-
✅ 公司要上線：用 Nginx / IIS 才是長期正確作法
-
✅ 有 Vue Router history：一定要做「重新整理不 404」設定
留言
張貼留言