Vue uygulaması barındırın: Vite, Vue Router history modu

Q: Bir Nuxt sitesini Lobsite'a deploy edebilir miyim?

Evet, üretilmiş bir siteyi: npx nuxi generate, ardından npx lobsite .output/public çalıştırın. Sunucu rotaları gibi Nuxt sunucusuna ihtiyaç duyan sayfalar çalışmaz.

Q: Bir Vue uygulamasında "sayfa bulunamadı" görünümünü nasıl gösteririm?

Rotalarınızın sonuna her şeyi yakalayan bir rota ekleyin: { path: "/:pathMatch(.)", component: NotFound }. Tek sayfa modu açıkken bilinmeyen her sayfa yolu uygulamaya ulaşır, ne gösterileceğine yönlendirici karar verir.

npm create vue@latest ile oluşturulan bir Vue uygulamasını Vite, dist/ klasörüne derler: bir index.html ve her sayfayı çizen JavaScript. Lobsite bu klasörü barındırır. npm run build, ardından npx lobsite çalıştırın; uygulama HTTPS'li bir *.lobsite.app adresinde yayına girer. Tek sayfa modu açıldığında Vue Router'ın history modu çalışır.

Nasıl çalışır

Uygulamayı npm run build ile derleyin. Vite onu dist/ içine yazar.
Projede npx lobsite çalıştırın. Vite'ın derlemeye kopyaladığı public/ klasörünü değil, dist/ klasörünü deploy eder. İlk deploy hesap gerektirmez ve 6 saat sürer.
Vue Router için tek sayfa modunu açın: lobsite.toml içinde spa = true ya da sitenin ayarlarında Tek sayfalı uygulama. Siteyi sahiplenme bağlantısıyla ücretsiz bir hesapta koruyun.

Vue Router history modu

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createWebHistory(), /projects/7 gibi temiz adresler verir. Birini doğrudan açmak sunucudan var olmayan bir dosya ister; tek sayfa modu index.html dosyanızla yanıt verir ve Vue Router doğru görünümü gösterir.
createWebHashHistory() (/#/projects/7 gibi adresler) tek sayfa modu olmadan çalışır, çünkü sunucu yalnızca / görür. Temiz adresler paylaşım ve arama motorları için daha iyidir.
Her şeyi yakalayan bir rota (path: "/:pathMatch(.*)*"), uygulamanızın kendi "sayfa bulunamadı" görünümünün yeridir; tek sayfa modunda bilinmeyen her sayfa yolu uygulamaya ulaşır.

Nuxt ve Vue CLI

Nuxt, npx nuxi generate ile .output/public/ içine statik bir site oluşturur. Bu klasör kendiliğinden bulunmaz; bir kez belirtin, npx lobsite .output/public, lobsite.toml içinde hatırlanır. Her sayfa kendi dosyası olarak üretildiğinden, tek sayfa modu yalnızca Nuxt'ın üretmediği rotalar için gerekir. Nuxt'ın sunucu rotaları ve sunucu tarafı oluşturması Node çalıştıran bir barındırma gerektirir.
Vue CLI (@vue/cli-service) bakım modundadır ve yeni projeler Vite kullanır. Mevcut bir Vue CLI projesi dist/ içine derler ve aynı şekilde deploy edilir.

Tek sayfalı uygulamalar

lobsite.toml'da spa = true ya da paneldeki tek bir anahtar: derin bağlantılar uygulamanızı açar, eksik dosyalar yine 404 verir.

Yalnızca değişen dosyalar yüklenir

Dosyalar hash'lerine göre saklanır. Değişmemiş bir siteyi yeniden deploy etmek 0 bayt yükler.

Her deploy'un bir URL'si olur

Yayına almadan önce önizleyin. Yönlendirmeler dahil tek tıkla geri alın.

Her yerde HTTPS

Her site ilk deploy'dan itibaren HTTPS'li bir *.lobsite.app adresi alır.

Doğrudan çalışan formlar

Bir formu /_lobsite/forms/contact adresine yönlendirin. Spam filtresi dahil.

Denemek için hesap gerekmez

Hesapsız bir deploy 6 saat yayında kalır. Sahiplenme bağlantısı onu ücretsiz olarak korur.

Vue barındırma hizmetleri karşılaştırması

	Lobsite	Netlify	Vercel	GitHub Pages
Vue Router history modu	`spa = true` veya paneldeki bir anahtar	Bir `_redirects` kuralı	`vercel.json` içinde bir rewrite	Hayır: hash modu veya 404 durumuyla sunulan `404.html`
Deploy sonrası eksik betik dosyaları	404, net bir hata	Uygulamanın `index.html` dosyası	Uygulamanın `index.html` dosyası	404
Nuxt sunucu tarafı oluşturma	Hayır	Evet	Evet	Hayır
İlk deploy'dan önce hesap	Hayır: 6 saat yayında, sonra ücretsiz koruyun	Evet	Evet	Evet, ve bir depo
Backend'siz formlar	Evet, site bir hesaptayken	Evet	Hayır	Hayır
Özel alan adı	Evet, ücretsiz	Evet	Evet	Evet

Tarayıcıda çalışan bir Vue uygulaması için Lobsite, dist/ klasöründen yayındaki bir adrese tek komuttur; history modu tek ayar uzaklıktadır ve her deploy için bir önizleme URL'si vardır.

Sık sorulan sorular

Vue Router sayfaları yenilenince neden "Not found" gösteriyor?

History modundaki adresler yalnızca uygulamanın içinde vardır. Bu yolların index.html dosyanızı açması için tek sayfa modunu açın: lobsite.toml içinde spa = true ya da sitenin ayarlarında Tek sayfalı uygulama.

Lobsite'taki bir Vue uygulaması hash modu mu, history modu mu kullanmalı?

Tek sayfa modu açıkken history modu. Adresler daha temizdir ve arama motorları onları ayrı sayfalar olarak ele alır. Hash modu yalnızca sunucu ayarlarını değiştiremediğiniz yerlerde mantıklıdır.

Bir Nuxt sitesini Lobsite'a deploy edebilir miyim?

Evet, üretilmiş bir siteyi: npx nuxi generate, ardından npx lobsite .output/public çalıştırın. Sunucu rotaları gibi Nuxt sunucusuna ihtiyaç duyan sayfalar çalışmaz.

Bir Vue uygulamasında "sayfa bulunamadı" görünümünü nasıl gösteririm?

Rotalarınızın sonuna her şeyi yakalayan bir rota ekleyin: { path: "/:pathMatch(.*)*", component: NotFound }. Tek sayfa modu açıkken bilinmeyen her sayfa yolu uygulamaya ulaşır, ne gösterileceğine yönlendirici karar verir.

Vue uygulaması barındırma