Vite 是什麼？前端專案為什麼需要開發伺服器與建置

開發時快速預覽，上線前把專案整理成瀏覽器能讀的檔案

前面安裝好 Node.js 之後，建立 Vue、React 或其他現代前端專案時，很快就會看到 Vite。它不是新的程式語言，也不是幫網站加上某一項功能的套件，而是站在開發流程中間，協助處理模組、套件與各種原始檔案。你可以用比較適合開發的方式整理專案，再由 Vite 轉成瀏覽器最後能執行的 HTML、CSS 與 JavaScript。

這篇會帶你看懂：

• 為什麼現代前端專案不只直接打開一個 HTML 檔案。
• Vite 如何處理模組、套件，以及 Vue、React 等開發時的原始碼。
• npm run dev 如何啟動開發伺服器，讓修改能快速顯示在畫面上。
• npm run build 如何產生真正準備上線的 dist 資料夾。
• 開發用的本機網址，為什麼不能直接當成公開網站分享。
• npm、node_modules、import、環境變數與 SPA 等常見名詞各自在做什麼。

開發模式和正式上線是兩條不同的流程。執行開發伺服器時，Vite 主要讓你在自己的電腦上快速預覽，關掉程式後那個網址就不存在；執行建置時，它才會把專案整理、最佳化並輸出成一包可以部署的檔案。這也是為什麼 AI 說「網站已完成」時，還要繼續確認它是否成功建置，以及部署平台真正需要的是專案原始碼，還是建置後的 dist。

環境變數也需要特別注意。前端程式最後會送進使用者的瀏覽器，因此即使名稱看起來像設定值，也不能拿來保存真正的秘密；以 VITE_ 開頭的內容會被放進前端建置結果，更不應包含私密金鑰。你可以在互動式簡報裡比較開發與建置流程，再依照網站類型、框架與部署位置整理需求。Vite 最後交出的仍然是瀏覽器熟悉的檔案，前面學過的 HTML、CSS 與 JavaScript 並沒有消失，只是多了一個工具幫你把它們組織得更有效率。