Production Deployment 接下來的四篇文章內容是關於最佳實踐的內容
意思就是相當實用一定要練習摟！
快來看看生產部署吧～
開發環境 vs. 生產環境 - Development vs. Production
在開發階段，Vue 提供了多項功能來提升開發體驗：
- 常見錯誤與陷阱的警告
- Props/事件的驗證
- 反應式的除錯掛鉤
- 與 Devtools 的整合
然而，這些功能在生產環境中並無實際用途，一些警告檢查還會帶來少量的效能負擔。因此，在部署至生產環境時，我們應該去除所有不必要、僅用於開發的代碼分支，以減少檔案大小並提升效能。
不使用建構工具 - Without Build Tools
如果您在未使用建構工具的情況下透過 CDN 或自我託管腳本載入 Vue，請確保在部署到生產環境時使用生產版（以.prod.js 結尾的 dist 文件）。生產版已預先壓縮，並去除了所有僅供開發用的代碼分支。- 如果使用全域建構（透過 Vue 全域變數存取）：請使用
vue.global.prod.js。 - 如果使用 ESM 建構（透過原生 ESM 匯入存取）：請使用
vue.esm-browser.prod.js。
請參考 dist 文件指南以獲取更多詳情。
使用建構工具 - With Build Tools
透過 create-vue（基於 Vite）或 Vue CLI（基於 webpack）搭建的專案已預先配置為生產版建構。
如果您使用自訂設置，請確保：
vue解析為vue.runtime.esm-bundler.js。- 編譯時的功能標誌已正確配置。
process.env.NODE_ENV在建構過程中被替換為 "production"。
其他參考資料：
追蹤執行時錯誤 - Tracking Runtime Errors
應用層級的錯誤處理器可用於將錯誤報告至追蹤服務：
import { createApp } from 'vue'
const app = createApp(...)
app.config.errorHandler = (err, instance, info) => {
// 將錯誤報告至追蹤服務
}
像是 Sentry 和 Bugsnag 等服務也提供 Vue 的官方整合方案。
這篇介紹蠻簡短的～
應該還是用Vite比較方便吧～
如果是 Vue 的建構方式，以 Vite 來進行構建是目前最方便且高效的選擇，原因如下：
- 快速開發體驗：Vite 針對開發模式進行了優化，啟動速度快，且支援熱更新（HMR），在專案開發時能夠極大提升效率。
- 內建 Production 配置：使用 Vite 建構的專案會自動配置為適合 production 環境的優化，包含代碼分割、資源壓縮及移除開發用代碼等，免去手動設定的麻煩。
- 輕量且靈活：Vite 預設支援 Vue，但也可以輕鬆整合其他前端工具或插件，適合不同需求的專案。
- 文件齊全，持續更新：Vite 是由 Vue 的作者尤雨溪推出的，因此與 Vue 的整合相當完善，且官方文件和社群支援非常豐富。
