Production Deployment 接下來的四篇文章內容是關於最佳實踐的內容
意思就是相當實用一定要練習摟!
快來看看生產部署吧~
在開發階段,Vue 提供了多項功能來提升開發體驗:
然而,這些功能在生產環境中並無實際用途,一些警告檢查還會帶來少量的效能負擔。因此,在部署至生產環境時,我們應該去除所有不必要、僅用於開發的代碼分支,以減少檔案大小並提升效能。
如果您在未使用建構工具的情況下透過 CDN 或自我託管腳本載入 Vue,請確保在部署到生產環境時使用生產版(以 .prod.js
結尾的 dist 文件)。生產版已預先壓縮,並去除了所有僅供開發用的代碼分支。
vue.global.prod.js
。vue.esm-browser.prod.js
。請參考 dist 文件指南以獲取更多詳情。
透過 create-vue
(基於 Vite)或 Vue CLI(基於 webpack)搭建的專案已預先配置為生產版建構。
如果您使用自訂設置,請確保:
vue
解析為 vue.runtime.esm-bundler.js
。process.env.NODE_ENV
在建構過程中被替換為 "production"。其他參考資料:
應用層級的錯誤處理器可用於將錯誤報告至追蹤服務:
import { createApp } from 'vue'
const app = createApp(...)
app.config.errorHandler = (err, instance, info) => {
// 將錯誤報告至追蹤服務
}
像是 Sentry 和 Bugsnag 等服務也提供 Vue 的官方整合方案。
這篇介紹蠻簡短的~
應該還是用Vite比較方便吧~
如果是 Vue 的建構方式,以 Vite 來進行構建是目前最方便且高效的選擇,原因如下: