Vue Static Hosting

Vue-Projekt
statisch veröffentlichen

Laden Sie die statische Ausgabe aus Vue, Vite, Vue CLI oder Nuxt hoch und veröffentlichen Sie sie mit History-Mode-Fallback, HTTPS, Edge-Auslieferung und eigener Domain.

Setup-Schritte ansehen
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
// Use a deploy-safe asset base
base: './',
build: {
outDir: 'dist'
}
})
Vite und webpack bereit

Wissen, welchen Vue-Ordner Sie hochladen

Viele Vue-Deployment-Probleme entstehen vor dem Hosting: falscher Ausgabeordner, falscher base-Pfad oder ein Build, der lokal nicht als Produktion geprüft wurde.

Vite + Vue

npm run build
output: dist/

Vite legt den Produktions-Build standardmäßig in dist ab. Wenn build.outDir oder base geändert wurde, laden Sie genau diesen Ordner hoch und testen die Asset-URLs.

Vue CLI

npm run build
output: dist/

Vue-CLI-Builds werden meist aus dist veröffentlicht. Liegt die App unter einem Unterpfad, muss publicPath zur finalen URL-Struktur passen.

Nuxt Static Output

nuxi generate
output: .output/public oder dist/

Nuxt kann statische Ausgabe erzeugen. Server-Routen und Server-APIs brauchen eine Laufzeit. Für diesen Flow laden Sie nur die generierten öffentlichen statischen Dateien hoch.

Was Vue Router im History Mode wirklich braucht

Saubere URLs lohnen sich

Hash-Routen funktionieren fast überall, aber URLs mit #-Fragmenten wirken wie ein Workaround und sind unpraktisch für Teilen, Analytics und Produktpolitur.

Vue Router im History Mode gibt saubere Pfade wie /about oder /dashboard/settings. Dafür muss der Host wissen, dass nicht gefundene Dokumentrouten index.html ausliefern sollen.

Wie DeployPages History Mode behandelt

Wenn eine Anfrage kein echtes statisches Asset trifft, kann DeployPages die index.html im Root ausliefern und Vue Router die endgültige Ansicht im Browser auflösen lassen.

  • Direktaufrufe verschachtelter Routen führen nicht direkt zu 404.
  • Das Root-Dokument wird als Fallback zurückgegeben.
  • Vue mountet, liest die aktuelle URL und rendert die passende Route.

Produktionschecks für Vue

Eine Vue-App kann im Dev-Server laufen und nach dem Upload trotzdem scheitern. Diese Checks fangen die typischen Fehler ab.

Base-Pfad

Bei Vite base prüfen, bei Vue CLI publicPath. Falsche Werte zeigen sich meist als fehlendes CSS, JavaScript, Schriften oder Bilder.

History-Fallback

Öffnen Sie eine verschachtelte Route direkt und aktualisieren Sie sie. Wenn die Seite lebt, funktioniert der Fallback.

Nur statische Ausgabe

DeployPages liefert statische Dateien aus. API Routes, Server-Middleware und SSR-only-Verhalten brauchen Backend oder Runtime.

Lokale Vorschau

Nutzen Sie einen echten lokalen Preview-Server für den Produktions-Build. dist/index.html per file:// zu öffnen, verdeckt oder erzeugt andere Probleme.

Vue-Deployment-Workflow

01

Statische Assets bauen

Führen Sie den Produktions-Build in Vite, Vue CLI oder Nuxt Static Mode aus, damit die App als Dateien entsteht, die ein Browser direkt laden kann.

02

Ausgabeordner finden

Die meisten Vue- und Vite-Projekte schreiben nach dist. Nuxt Static-Projekte veröffentlichen je nach Konfiguration .output/public oder dist.

Für Nuxt Static Builds laden Sie meist .output/public oder dist hoch, abhängig von Ihrer Projektkonfiguration.

03

Hochladen und Links prüfen

Laden Sie den gesamten Ausgabeordner hoch und prüfen Sie Deep Links, Router-Navigation und Asset-Pfade auf der Live-Seite.

Häufige Vue-Deployment-Probleme

Fix 01

Refresh auf verschachtelter Route liefert 404

Vue Router nutzt History Mode, aber der Host sucht nach einer echten Datei. Nutzen Sie SPA-Fallback, damit unbekannte Dokumentrouten index.html zurückgeben.

Fix 02

CSS- oder JS-Dateien liefern 404

Prüfen Sie Vite base oder Vue CLI publicPath. Kontrollieren Sie auch, ob der gesamte dist-Ordner inklusive Assets hochgeladen wurde.

Fix 03

Hash Mode funktioniert, History Mode nicht

Hash Mode hält Routing nach # im Browser. History Mode nutzt saubere URLs und braucht Host-Fallback für Direktaufrufe.

Fix 04

Nuxt-Ausgabe enthält kein Serververhalten

Statische Nuxt-Ausgabe kann als Dateien gehostet werden. Nuxt Server Routes, Middleware und SSR-only-Verhalten brauchen Server-Runtime.

Vue-Deployment: häufige Fragen

Warum liefern CSS und JS nach dem Upload 404?

Meist wurden Asset-Pfade für eine andere base-URL gebaut oder das Asset-Verzeichnis wurde nicht hochgeladen. Bei Vite base prüfen, bei Vue CLI publicPath.

Unterstützt das Nuxt?

Ja, für statische Ausgabe. Generieren Sie zuerst die statische Website und laden Sie dann den erzeugten öffentlichen Ordner hoch. Für Nuxt Server Rendering oder Server-APIs ist DeployPages nicht das richtige Ziel.

Soll ich Hash Mode oder History Mode nutzen?

Nutzen Sie History Mode, wenn saubere URLs wichtig sind und der Host Fallback auf index.html unterstützt. Hash Mode ist einfacher zu hosten, lässt aber # in jeder Client-Route.

Soll ich das Vue-Quellprojekt hochladen?

Nein. Laden Sie den Produktions-Ausgabeordner hoch, meist dist. Das Quellprojekt enthält Entwicklungsdateien und Abhängigkeiten, die nicht direkt ausgeliefert werden sollen.

Überlebt Pinia- oder Vuex-State einen Refresh?

Nicht automatisch. Ein Browser-Refresh setzt In-Memory-State zurück. Persistieren Sie wichtige Daten mit localStorage oder einem passenden Persistence-Plugin.

Kann ich auf eine frühere Version zurückrollen?

Ja. DeployPages hält Deployment-Verlauf bereit, damit Sie bei Bedarf auf einen früheren statischen Build zurückgehen können.