做(zuò)自(zì)由與創造的先行(xíng)者

生産部署

Vue.js中文手冊

開(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)發
下(xià)一(yī)篇:性能(néng)優化
上(shàng)一(yī)篇:服務端渲染 (SSR)