生產部署 ​

開發與生產 ​

在開發過程中，Vue 提供了多項功能以提升開發體驗

• 對常見錯誤和陷阱的警告
• 屬性/事件驗證
• 響應性除錯鉤子
• 開發工具整合

然而，這些功能在生產環境中將變得無用。一些警告檢查也可能導致輕微的效能開銷。在生產部署時，我們應該移除所有未使用的僅限開發的程式碼分支，以減小負載大小並提高效能。

無需構建工具 ​

如果你使用 CDN 或自託管指令碼載入 Vue 而不使用構建工具，確保在生產部署時使用生產構建（以 .prod.js 結尾的 dist 檔案）。生產構建已經預先壓縮，並移除了所有僅限開發的程式碼分支。

• 如果使用全域性構建（透過 Vue 全域性訪問）：使用 vue.global.prod.js。
• 如果使用 ESM 構建（透過原生 ESM 匯入訪問）：使用 vue.esm-browser.prod.js。

有關詳細資訊，請參閱dist 檔案指南。

使用構建工具 ​

透過 create-vue（基於 Vite）或 Vue CLI（基於 webpack）生成的專案已預先配置為生產構建。

如果使用自定義設定，請確保

1. vue 解析為 vue.runtime.esm-bundler.js。
2. 編譯時功能標誌配置正確。
3. 在構建過程中，process.env.NODE_ENV 被替換為 "production"。

其他參考資料

• Vite 生產構建指南
• Vite 部署指南
• Vue CLI 部署指南

跟蹤執行時錯誤 ​

應用級別的錯誤處理器（app-level error handler）可以用來向跟蹤服務報告錯誤

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // report error to tracking services
}

例如，Sentry 和 Bugsnag 也為 Vue 提供了官方整合。