Bereitstellung auf Hosting-Plattformen
Stellen Sie Vue-Apps auf statischen Hosts und Plattformen bereit.
Bereitstellung auf Hosting-Plattformen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Ihre Anwendung veröffentlichen
Eine Vue-SPA wird zu statischen Dateien kompiliert, sodass Sie sie auf jedem Static Host bereitstellen können. Plattformen wie Netlify, Vercel und GitHub Pages machen die Bereitstellung dieser Dateien schnell und häufig kostenlos.
Was Sie bereitstellen
Sie stellen den Inhalt des durch npm run build erzeugten dist-Ordners bereit. Der Host stellt diese Dateien weltweit über ein CDN bereit.
npm run build
# upload the dist/ folder to your hostAuf Netlify bereitstellen
Netlify kann aus Ihrem Git-Repository heraus bauen. Sie geben den Build-Befehl und den zu veröffentlichenden Ordner an.
# Netlify settings
# Build command: npm run build
# Publish directory: distAuf Vercel bereitstellen
Vercel erkennt Vite-Projekte automatisch. Verbinden Sie Ihr Repository. Vercel führt den Build aus, stellt die Ausgabe bereit und veröffentlicht sie nach jedem Push erneut.
# Vercel auto-detects:
# Build command: npm run build
# Output directory: distAuf GitHub Pages bereitstellen
GitHub Pages stellt statische Dateien aus einem Repository bereit. Sie erstellen den Build lokal oder in CI und übertragen anschließend die dist-Ausgabe in den Pages-Branch oder verwenden eine Action.
Das Problem mit dem History-Modus
Der History-Modus von Vue Router erzeugt saubere URLs wie /about. Ein Static Host verfügt jedoch über keine echte Datei /about, sodass ein direkter Aufruf oder eine Aktualisierung einen 404-Fehler zurückgibt.
Die SPA-Weiterleitung als Lösung
Die Lösung besteht darin, den Server anzuweisen, für alle Routen index.html auszuliefern. Dadurch kann Vue Router das Routing auf dem Client übernehmen.
Netlify-Weiterleitungsregel
Fügen Sie auf Netlify eine _redirects-Datei oder eine Regel in netlify.toml hinzu, die alle Pfade auf index.html umschreibt.
# public/_redirects
/* /index.html 200Vercel-Rewrite-Regel
Auf Vercel erreicht eine Rewrite-Regel in vercel.json denselben Fallback auf index.html.
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}Konfiguration des Basispfads
Wenn Ihre Anwendung aus einem Unterpfad bereitgestellt wird, wie häufig bei GitHub Pages mit /my-repo/, setzen Sie die Option base in Ihrer Vite-Konfiguration, damit Asset-URLs korrekt aufgelöst werden.
// vite.config.js
export default {
base: "/my-repo/"
}CI-Bereitstellung
Automatisieren Sie Bereitstellungen mit Continuous Integration. Ein Workflow installiert Abhängigkeiten, führt Tests aus, erstellt den Build und veröffentlicht ihn bei jedem Push in Ihren Main-Branch, sodass die Veröffentlichung ohne manuellen Aufwand erfolgt.
# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/Kurzer Check
Testen Sie Ihr Wissen über die Bereitstellung.
Zusammenfassung
Stellen Sie den dist-Ordner auf einem Static Host wie Netlify, Vercel oder GitHub Pages bereit. Fügen Sie einen SPA-Fallback hinzu, also eine Weiterleitung oder ein Rewrite auf index.html, damit Routen im History-Modus nach einer Aktualisierung funktionieren. Setzen Sie für die Bereitstellung aus einem Unterpfad den Vite-base und automatisieren Sie alles mit CI. Als Nächstes überwachen und warten Sie die Anwendung in der Produktion.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Bereitstellung auf Hosting-Plattformen“ kostenlos?
Ja — der vollständige Text von „Bereitstellung auf Hosting-Plattformen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Bereitstellung auf Hosting-Plattformen“?
Stellen Sie Vue-Apps auf statischen Hosts und Plattformen bereit. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Bereitstellung auf Hosting-Plattformen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Build-Prozess optimieren
- Bereitstellung auf Hosting-Plattformen
- Überwachung und Wartung