開(kāi)發環境 vs. 生産環境
在開(kāi)發過程中,Vue 提供了(le)許多功能(néng)來提升開(kāi)發體驗:
對常見(jiàn)錯誤和(hé)隐患的警告
對組件 props / 自(zì)定義事件的校驗
響應性調試鈎子
開(kāi)發工(gōng)具集成
然而,這(zhè)些功能(néng)在生産環境中并不會被使用,一(yī)些警告檢查也會産生少(shǎo)量的性能(néng)開(kāi)銷。當部署到生産環境中時(shí),我們應該移除所有未使用的、僅用于開(kāi)發環境的代碼分支,來獲得更小的包體積和(hé)更好的性能(néng)。
不使用構建工(gōng)具
如(rú)果你沒有使用任何構建工(gōng)具,而是從(cóng) CDN 或其他(tā)源來加載 Vue,請(qǐng)确保在部署時(shí)使用的是生産環境版本(以 .prod.js 結尾的構建文件)。生産環境版本會被最小化,并移除了(le)所有僅用于開(kāi)發環境的代碼分支。
如(rú)果需要(yào)使用全局變量版本(通(tōng)過 Vue 全局變量訪問(wèn)):請(qǐng)使用 vue.global.prod.js。
如(rú)果需要(yào) ESM 版本(通(tōng)過原生 ESM 導入訪問(wèn)):請(qǐng)使用 vue.esm-browser.prod.js。
更多細節請(qǐng)參考構建文件指南。
使用構建工(gōng)具
通(tōng)過 create-vue(基于 Vite)或是 Vue CLI(基于 webpack)搭建的項目都(dōu)已經預先做(zuò)好了(le)針對生産環境的配置。
如(rú)果使用了(le)自(zì)定義的構建,請(qǐng)确保:
vue 被解析為(wèi) vue.runtime.esm-bundler.js。
編譯時(shí)功能(néng)标記已被正确配置。
process.env.NODE_ENV 會在構建時(shí)被替換為(wèi) "production"。
其他(tā)參考:
Vite 生産環境指南
Vite 部署指南
Vue CLI 部署指南
追蹤運行(xíng)時(shí)錯誤
應用級錯誤處理 可(kě)以用來向追蹤服務報告錯誤:
js
import { createApp } from 'vue'
const app = createApp(...)
app.config.errorHandler = (err, instance, info) => {
// 向追蹤服務報告錯誤
}
諸如(rú) Sentry 和(hé) Bugsnag 等服務也為(wèi) Vue 提供了(le)官方集成。
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發