Ana içeriğe geç

Üretim Dağıtımı

Üretim Dağıtımı​

Geliştirme vs. Üretim​

Geliştirme sırasında, Vue geliştirme deneyimini iyileştirmek için bir dizi özellik sunar:

  • Yaygın hatalar ve tuzaklar için uyarılar
  • Props / olay doğrulama
  • Reaktivite hata ayıklama kancaları
  • Devtools entegrasyonu

Ancak, bu özellikler üretimde işe yaramaz hale gelir. Bazı uyarı kontrolleri ayrıca küçük bir performans yükü de getirebilir.

tehlike

Üretime geçerken, daha küçük yük boyutu ve daha iyi performans için tüm kullanılmayan, yalnızca geliştirme için olan kod dallarını bırakmalıyız.

Yapı Araçları Olmadan​

Eğer Vue'yu bir CDN'den veya kendi sunucunuzdan yükleyerek yapı aracı olmadan kullanıyorsanız, üretime geçerken üretim yapısını (.prod.js ile biten dist dosyaları) kullanmaya dikkat edin. Üretim yapıları, tüm geliştirme için olan kod dalları kaldırılarak önceden küçültülmüştür.

  • Global yapı kullanıyorsanız ( Vue global'i üzerinden erişim): vue.global.prod.js kullanın.
  • ESM yapısı kullanıyorsanız (yerel ESM importları üzerinden erişim): vue.esm-browser.prod.js kullanın.

Daha fazla bilgi için dist dosyası kılavuzuna başvurun.

Yapı Araçları ile​

create-vue (Vite tabanlı) veya Vue CLI (webpack tabanlı) ile oluşturulan projeler, üretim yapıları için önceden yapılandırılmıştır.

bilgi

Özel bir kurulum kullanıyorsanız, şu noktalara dikkat edin:

  1. vue vue.runtime.esm-bundler.js olarak çözülmeli.
  2. derleme zamanı özellik bayrakları düzgün bir şekilde yapılandırılmalı.
  3. process.env.NODE_ENV derleme sırasında "production" ile değiştirilmelidir.

Ek referanslar:

Çalışma Zamanı Hatalarını İzleme​

Uygulama düzeyi hata işleyicisi, hataları izleme hizmetlerine bildirmek için kullanılabilir:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // hatayı izleme hizmetlerine bildir
}
not

Sentry ve Bugsnag gibi hizmetler, Vue için resmi entegrasyonlar da sunmaktadır.