Hostuj aplikację Vue: Vite, Vue Router w trybie history

Q: Czy mogę wdrożyć stronę Nuxt do Lobsite?

Tak, wygenerowaną: uruchom npx nuxi generate, potem npx lobsite .output/public. Strony wymagające serwera Nuxt, np. trasy serwerowe, nie zadziałają.

Q: Jak pokazać widok „nie znaleziono strony” w aplikacji Vue?

Dodaj na końcu tras trasę catch-all, { path: "/:pathMatch(.)", component: NotFound }. Z włączonym trybem jednostronicowym każda nieznana ścieżka strony trafia do aplikacji, więc to router decyduje, co pokazać.

Aplikację Vue utworzoną przez npm create vue@latest Vite buduje do dist/: jeden index.html i JavaScript, który rysuje każdą stronę. Lobsite hostuje ten folder. Uruchom npm run build, potem npx lobsite, a aplikacja będzie działać pod adresem *.lobsite.app z HTTPS. Tryb history w Vue Router działa po włączeniu trybu jednostronicowego.

Jak to działa

Zbuduj aplikację przez npm run build. Vite zapisze ją w dist/.
Uruchom npx lobsite w projekcie. Wdraża dist/, a nie public/, który Vite kopiuje do builda. Pierwsze wdrożenie nie wymaga konta i trwa 6 godzin.
Włącz tryb jednostronicowy dla Vue Router: spa = true w lobsite.toml albo Aplikacja jednostronicowa w ustawieniach strony. Zachowaj stronę linkiem do przejęcia, na darmowym koncie.

Tryb history w Vue Router

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

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

createWebHistory() daje czyste adresy, np. /projects/7. Bezpośrednie otwarcie takiego adresu prosi serwer o nieistniejący plik; tryb jednostronicowy odpowiada Twoim index.html, a Vue Router pokazuje właściwy widok.
createWebHashHistory() (adresy jak /#/projects/7) działa bez trybu jednostronicowego, bo serwer widzi tylko /. Czyste adresy są lepsze do udostępniania i dla wyszukiwarek.
Trasa catch-all (path: "/:pathMatch(.*)*") to miejsce na własny widok „nie znaleziono strony”, bo z trybem jednostronicowym każda nieznana ścieżka strony trafia do aplikacji.

Nuxt i Vue CLI

Nuxt buduje stronę statyczną przez npx nuxi generate do .output/public/. Ten folder nie jest wykrywany sam, więc podaj go raz, npx lobsite .output/public, a zostanie zapamiętany w lobsite.toml. Każda strona jest generowana jako osobny plik, więc tryb jednostronicowy potrzebny jest tylko dla tras, których Nuxt nie wygenerował. Trasy serwerowe i renderowanie na serwerze w Nuxt wymagają hostingu z Node.
Vue CLI (@vue/cli-service) jest w trybie utrzymania, a nowe projekty używają Vite. Istniejący projekt Vue CLI buduje do dist/, który wdraża się tak samo.

Aplikacje jednostronicowe

spa = true w lobsite.toml lub jeden przełącznik w panelu: głębokie linki otwierają aplikację, brakujące pliki nadal dają 404.

Wgrywane są tylko zmienione pliki

Pliki są przechowywane według hasha. Ponowne wdrożenie niezmienionej strony wgrywa 0 bajtów.

Każde wdrożenie ma własny URL

Podgląd przed publikacją. Wycofanie jednym kliknięciem, razem z przekierowaniami.

HTTPS wszędzie

Każda strona dostaje adres *.lobsite.app z HTTPS od pierwszego wdrożenia.

Formularze, które po prostu działają

Skieruj formularz na /_lobsite/forms/contact. Filtr spamu w zestawie.

Wypróbuj bez konta

Wdrożenie bez konta działa przez 6 godzin. Link do przejęcia pozwala je zatrzymać, za darmo.

Porównanie hostingów dla Vue

	Lobsite	Netlify	Vercel	GitHub Pages
Tryb history w Vue Router	`spa = true` lub przełącznik w panelu	Reguła w `_redirects`	Rewrite w `vercel.json`	Nie: tryb hash albo `404.html` ze statusem 404
Brakujące pliki skryptów po wdrożeniu	404, jasny błąd	`index.html` aplikacji	`index.html` aplikacji	404
Renderowanie na serwerze w Nuxt	Nie	Tak	Tak	Nie
Konto przed pierwszym wdrożeniem	Nie: 6 godzin online, potem zachowaj za darmo	Tak	Tak	Tak, i repozytorium
Formularze bez backendu	Tak, gdy strona jest na koncie	Tak	Nie	Nie
Własna domena	Tak, za darmo	Tak	Tak	Tak

Dla aplikacji Vue działającej w przeglądarce Lobsite to jedno polecenie od dist/ do działającego adresu, z trybem history na jedno ustawienie i URL podglądu dla każdego wdrożenia.

Najczęstsze pytania

Dlaczego strony Vue Router po odświeżeniu pokazują „Not found”?

Adresy w trybie history istnieją tylko wewnątrz aplikacji. Włącz tryb jednostronicowy, spa = true w lobsite.toml albo Aplikacja jednostronicowa w ustawieniach strony, aby te ścieżki otwierały Twój index.html.

Czy aplikacja Vue w Lobsite powinna używać trybu hash czy history?

History, z włączonym trybem jednostronicowym. Adresy są czystsze, a wyszukiwarki traktują je jako osobne strony. Tryb hash ma sens tylko tam, gdzie nie możesz zmienić ustawień serwera.

Czy mogę wdrożyć stronę Nuxt do Lobsite?

Tak, wygenerowaną: uruchom npx nuxi generate, potem npx lobsite .output/public. Strony wymagające serwera Nuxt, np. trasy serwerowe, nie zadziałają.

Jak pokazać widok „nie znaleziono strony” w aplikacji Vue?

Dodaj na końcu tras trasę catch-all, { path: "/:pathMatch(.*)*", component: NotFound }. Z włączonym trybem jednostronicowym każda nieznana ścieżka strony trafia do aplikacji, więc to router decyduje, co pokazać.

Hosting aplikacji Vue