Vue-App hosten: Vite, Vue Router im History-Modus

Q: Kann ich eine Nuxt-Website auf Lobsite deployen?

Ja, eine generierte: Führe npx nuxi generate aus, dann npx lobsite .output/public. Seiten, die Nuxts Server brauchen, etwa Server-Routen, laufen nicht.

Q: Wie zeige ich in einer Vue-App eine „Seite nicht gefunden“-Ansicht?

Füge am Ende deiner Routen eine Catch-all-Route hinzu, { path: "/:pathMatch(.)", component: NotFound }. Mit eingeschaltetem Single-Page-Modus erreicht jeder unbekannte Seitenpfad die App, und der Router entscheidet, was angezeigt wird.

Eine mit npm create vue@latest erstellte Vue-App wird von Vite nach dist/ gebaut: eine index.html und das JavaScript, das jede Seite zeichnet. Lobsite hostet diesen Ordner. Führe npm run build aus, dann npx lobsite, und die App ist unter einer *.lobsite.app-Adresse mit HTTPS live. Der History-Modus von Vue Router funktioniert, sobald der Single-Page-Modus an ist.

So funktioniert es

Bau die App mit npm run build. Vite schreibt sie nach dist/.
Führe npx lobsite aus im Projekt. Es deployt dist/, nicht public/, das Vite in den Build kopiert. Das erste Deploy braucht kein Konto und hält 6 Stunden.
Schalte den Single-Page-Modus ein für Vue Router: spa = true in lobsite.toml oder Single-Page-App in den Einstellungen der Website. Behalte die Website mit dem Übernahme-Link, in einem kostenlosen Konto.

History-Modus von Vue Router

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

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

createWebHistory() liefert saubere Adressen wie /projects/7. Wer eine davon direkt öffnet, fragt den Server nach einer Datei, die es nicht gibt; der Single-Page-Modus antwortet mit deiner index.html, und Vue Router zeigt die richtige Ansicht.
createWebHashHistory() (Adressen wie /#/projects/7) funktioniert ohne Single-Page-Modus, da der Server nur / sieht. Saubere Adressen sind besser zum Teilen und für Suchmaschinen.
Eine Catch-all-Route (path: "/:pathMatch(.*)*") ist der Ort für die eigene „Seite nicht gefunden“-Ansicht deiner App, denn mit Single-Page-Modus erreicht jeder unbekannte Seitenpfad die App.

Nuxt und die Vue CLI

Nuxt baut eine statische Website mit npx nuxi generate nach .output/public/. Dieser Ordner wird nicht von selbst gefunden, also gib ihn einmal an, npx lobsite .output/public, und er wird in lobsite.toml gespeichert. Jede Seite wird als eigene Datei erzeugt, daher braucht es den Single-Page-Modus nur für Routen, die Nuxt nicht erzeugt hat. Server-Routen und Server-Rendering von Nuxt brauchen einen Hoster, der Node ausführt.
Die Vue CLI (@vue/cli-service) ist im Wartungsmodus, und neue Projekte nutzen Vite. Ein bestehendes Vue-CLI-Projekt baut nach dist/, das genauso deployt wird.

Single-Page-Apps

spa = true in lobsite.toml oder ein Schalter im Dashboard: Deep Links öffnen deine App, fehlende Dateien ergeben weiterhin 404.

Nur geänderte Dateien werden hochgeladen

Dateien werden nach ihrem Hash gespeichert. Ein erneutes Deploy einer unveränderten Website lädt 0 Bytes hoch.

Jedes Deploy bekommt eine URL

Vorschau ansehen, bevor es live geht. Mit einem Klick zurückrollen, samt Weiterleitungen.

HTTPS überall

Jede Website bekommt ab dem ersten Deploy eine *.lobsite.app-Adresse mit HTTPS.

Formulare, die einfach funktionieren

Lass ein Formular auf /_lobsite/forms/contact zeigen. Spamfilter inklusive.

Ausprobieren ohne Konto

Ein Deploy ohne Konto ist 6 Stunden live. Mit dem Übernahme-Link behältst du es, kostenlos.

Vue-Hoster im Vergleich

	Lobsite	Netlify	Vercel	GitHub Pages
History-Modus von Vue Router	`spa = true` oder ein Schalter im Dashboard	Eine `_redirects`-Regel	Ein Rewrite in `vercel.json`	Nein: Hash-Modus oder `404.html` mit Status 404
Fehlende Skriptdateien nach einem Deploy	404, ein klarer Fehler	Die `index.html` der App	Die `index.html` der App	404
Server-Rendering mit Nuxt	Nein	Ja	Ja	Nein
Konto vor dem ersten Deploy	Nein: 6 Stunden live, dann kostenlos behalten	Ja	Ja	Ja, und ein Repository
Formulare ohne Backend	Ja, sobald die Website in einem Konto ist	Ja	Nein	Nein
Eigene Domain	Ja, kostenlos	Ja	Ja	Ja

Für eine Vue-App, die im Browser läuft, ist Lobsite ein Befehl von dist/ zu einer Live-Adresse, mit dem History-Modus nur eine Einstellung entfernt und einer Vorschau-URL für jedes Deploy.

Häufige Fragen

Warum zeigen Vue-Router-Seiten beim Neuladen „Not found“?

Adressen im History-Modus existieren nur innerhalb der App. Schalte den Single-Page-Modus ein, spa = true in lobsite.toml oder Single-Page-App in den Einstellungen der Website, damit diese Pfade deine index.html öffnen.

Sollte eine Vue-App auf Lobsite Hash- oder History-Modus nutzen?

History-Modus, mit eingeschaltetem Single-Page-Modus. Die Adressen sind sauberer, und Suchmaschinen behandeln sie als eigene Seiten. Der Hash-Modus lohnt sich nur, wo du die Einstellungen des Servers nicht ändern kannst.

Kann ich eine Nuxt-Website auf Lobsite deployen?

Ja, eine generierte: Führe npx nuxi generate aus, dann npx lobsite .output/public. Seiten, die Nuxts Server brauchen, etwa Server-Routen, laufen nicht.

Wie zeige ich in einer Vue-App eine „Seite nicht gefunden“-Ansicht?

Füge am Ende deiner Routen eine Catch-all-Route hinzu, { path: "/:pathMatch(.*)*", component: NotFound }. Mit eingeschaltetem Single-Page-Modus erreicht jeder unbekannte Seitenpfad die App, und der Router entscheidet, was angezeigt wird.

Vue-App-Hosting