做自(zì)由與創造的先行者

生産部署

Vue.js中文(wén)手冊

開(kāi)發環境 vs. 生産環境 ​

在開(kāi)發過程中,Vue 提供了(le)許多功能(néng)來(lái)提升開(kāi)發體驗:

對(duì)常見錯誤和(hé)隐患的警告

對(duì)組件 props / 自(zì)定義事(shì)件的校驗

響應性調試鈎子

開(kāi)發工(gōng)具集成

然而,這(zhè)些(xiē)功能(néng)在生産環境中并不會(huì)被使用(yòng),一些(xiē)警告檢查也(yě)會(huì)産生少量的性能(néng)開(kāi)銷。當部署到(dào)生産環境中時(shí),我們應該移除所有未使用(yòng)的、僅用(yòng)于開(kāi)發環境的代碼分支,來(lái)獲得更小(xiǎo)的包體積和(hé)更好(hǎo)的性能(néng)。

不使用(yòng)構建工(gōng)具 ​

如果你(nǐ)沒有使用(yòng)任何構建工(gōng)具,而是從(cóng) CDN 或其他(tā)源來(lái)加載 Vue,請(qǐng)确保在部署時(shí)使用(yòng)的是生産環境版本(以 .prod.js 結尾的構建文(wén)件)。生産環境版本會(huì)被最小(xiǎo)化,并移除了(le)所有僅用(yòng)于開(kāi)發環境的代碼分支。

如果需要使用(yòng)全局變量版本(通過 Vue 全局變量訪問):請(qǐng)使用(yòng) vue.global.prod.js。

如果需要 ESM 版本(通過原生 ESM 導入訪問):請(qǐng)使用(yòng) vue.esm-browser.prod.js。

更多細節請(qǐng)參考構建文(wén)件指南。

使用(yòng)構建工(gōng)具 ​

通過 create-vue(基于 Vite)或是 Vue CLI(基于 webpack)搭建的項目都已經預先做好(hǎo)了(le)針對(duì)生産環境的配置。

如果使用(yòng)了(le)自(zì)定義的構建,請(qǐng)确保:

vue 被解析爲 vue.runtime.esm-bundler.js。

編譯時(shí)功能(néng)标記已被正确配置。

process.env.NODE_ENV 會(huì)在構建時(shí)被替換爲 "production"。

其他(tā)參考:

Vite 生産環境指南

Vite 部署指南

Vue CLI 部署指南

追蹤運行時(shí)錯誤 ​

應用(yòng)級錯誤處理(lǐ) 可以用(yòng)來(lái)向追蹤服務報(bào)告錯誤:

js

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {

// 向追蹤服務報(bào)告錯誤

}

諸如 Sentry 和(hé) Bugsnag 等服務也(yě)爲 Vue 提供了(le)官方集成。

網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發
下(xià)一篇:性能(néng)優化
上(shàng)一篇:服務端渲染 (SSR)