Nasazení do produkce ​

Vývoj versus produkce ​

Během vývoje Vue poskytuje několik funkcí, které zlepšují developer experience (DX):

• Varování před běžnými chybami a úskalími
• Validace vlastností (props) / událostí (events)
• Ladicí nástroje pro reaktivitu
• Integrace s DevTools

Tyto funkce jsou však v produkci zbytečné. Některé kontrolní mechanismy pro varování mohou způsobit i o něco větší zátěž na výkon. Při nasazení do produkce bychom měli veškerý nepoužitý kód určený pouze pro vývoj odstranit, což sníží velikost přenášených dat a zlepší výkon.

Bez nástrojů pro sestavení ​

Pokud používáte Vue bez build nástroje tím, že jej načítáte z CDN nebo vlastního skriptu, ujistěte se, že při nasazení do produkce používáte produkční build (soubory v adresáři dist, které končí na .prod.js). Produkční sestavení jsou předem zmenšena a obsahují pouze kód určený pro produkci.

• Pokud používáte globální build (přístup pomocí globální proměnné Vue): použijte vue.global.prod.js.
• Pokud používáte ESM build (přístup pomocí nativních ESM importů): použijte vue.esm-browser.prod.js.

Pro více informací se podívejte do průvodce soubory distribuce.

S nástroji pro sestavení ​

Projekty vytvořené pomocí create-vue (založené na Vite) nebo Vue CLI (založené na webpack) jsou přednastaveny pro produkční sestavení.

Pokud používáte vlastní nastavení, ujistěte se, že:

1. vue se překládá na vue.runtime.esm-bundler.js.
2. Compile-Time flags jsou správně nakonfigurovány.
3. process.env.NODE_ENV je během sestavení nahrazeno hodnotou "production".

Další odkazy:

• Průvodce produkčním sestavením s Vite
• Průvodce nasazením s Vite
• Průvodce nasazením s Vue CLI

Sledování běhových chyb ​

Error handler na úrovni aplikace lze použít k hlášení chyb do sledovacích služeb:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // hlášení chyby do sledovacích služeb
}

Služby jako Sentry a Bugsnag také poskytují oficiální integrace pro Vue.