Build & Deploy — Bereitstellung auf Vercel
In diesem Kapitel lernst du, wie du ein lokal entwickeltes Blogprojekt paketierst und kostenlos im Internet bereitstellst, um einen öffentlichen Zugriffslink zu erhalten.
Produktions-Bundle erstellen
Zum Entwickeln ausführennpm run dev, Vite startet einen lokalen Entwicklungsserver, der Hot-Updates unterstützt.
Aber was für die Bereitstellung benötigt wird, sindoptimierte, kleine Dateien— das ist der Produktions-Build.
$ npm run build
Nach der Ausführung wird eindist/Ordner im Projektstammverzeichnis generiert:
dist/ ├── index.html # 入口 HTML（资源引用已被替换为构建后的路径） ├── assets/ │ ├── index-Df3aBc9x.js # 打包后的 JS（代码已压缩、tree-shaking） │ ├── index-Gh7jKl2m.css # 打包后的 CSS（已提取、压缩） │ └── ... # 其他资源 ├── posts.json # public 目录的文件原样复制 └── favicon.ico # 其他静态资源
Beachte einige wichtige Änderungen:
- Dateinamen enthalten einen Hash (z. B.
Df3aBc9x); wenn sich der Inhalt ändert, ändert sich der Hash, der zur Browser-Cache-Steuerung verwendet wird - Der Code wurdeminifiziert und tree-shaken(wodurch ungenutzter Code entfernt wird)
- JS und CSS werden in separate Dateien aufgeteilt
public/Der Inhalt des Verzeichnisses wird unverändert in das Stammverzeichnis kopiert
Um das Build-Ergebnis in der Vorschau anzuzeigen, führe aus
npx vite preview; es startet einen lokalen Server im Produktionsmodus, um die Live-Umgebung zu simulieren.
Das Projekt zu GitHub pushen
Deployment-Plattformen (wie Vercel) ziehen normalerweise Code aus einem Git-Repository und bauen automatisch, daher musst du das Projekt zuerst auf GitHub hochladen.
Schritt 1: Ein GitHub-Repository erstellen
Klicke auf das + in der oberen rechten Ecke der GitHub-Website → Neues Repository und fülle aus:
- Repository-Name：blog-app
- Stelle es auf Public (für kostenloses Deployment)
- Setze kein Häkchen bei "Initialize this repository with a README" (weil du bereits Projektdateien lokal hast)
Schritt 2: Git lokal initialisieren und pushen
$ cd blog-app $ git init $ git add . $ git commit -m "初始化博客项目" $ git branch -M main $ git remote add origin https://github.com/你的用户名/blog-app.git $ git push -u origin main
Nachdem der Push erfolgreich war, aktualisiere die GitHub-Seite und du wirst alle Projektdateien sehen.
Bevor du pushst, stelle sicher
.gitignoredie Datei enthält bereitsnode_modulesunddist. node_modules sollte nicht hochgeladen werden (es kann über npm install wiederhergestellt werden), und dist sollte automatisch von der Build-Plattform generiert werden.
Auf Vercel bereitstellen
Vercelist derzeit die beliebteste Frontend-Deployment-Plattform mit Zero-Config-Unterstützung für Vue/Vite-Projekte.
Bereitstellungsschritte
- Besuchevercel.com, registriere dich/melde dich mit deinem GitHub-Konto an
- Klicke auf "New Project" → Import Git Repository → wähle das blog-app-Repository aus
- Vercel erkennt automatisch, dass das Projekt Vite (Vue) ist; keine Konfiguration nötig
- Klicken Sie auf "Deploy", warten Sie ein paar Dutzend Sekunden, der Build wird abgeschlossen
- Nach erfolgreichem Deployment erhalten Sie einen Link, z. B.:
https://blog-app.vercel.app
| Konfigurationseintrag | Wert | Beschreibung |
|---|---|---|
| Framework-Voreinstellung | Vite | Automatisch erkennen |
| Build-Befehl | npm run build | Automatisch erkennen |
| Ausgabeverzeichnis | dist | Automatisch erkennen |
| Root-Verzeichnis | ./ | Standard-Projektstammverzeichnis |
Automatisches Deployment
Von da an, wann immer Sie Code lokal ändern und zu GitHub pushen (git push), wird Vercel automatisch:
- Erkennen, dass das Repository neue Commits enthält
- Den neuesten Code pullen, npm install ausführen
- npm run build ausführen
- In die Produktion deployen
Der gesamte Prozess erfordert keine manuellen Aktionen; pushen und es geht live.
Eigene Domain (optional)
Vercel bietet.vercel.appkostenlose Subdomains, und du kannst auch deine eigene Domain anbinden.
- Im Vercel-Projekt-Dashboard → Einstellungen → Domains
- Geben Sie Ihre Domain ein (z. B. blog.example.com)
- Folge den Anweisungen, um bei deinem DNS-Anbieter einen CNAME-Eintrag hinzuzufügen, der auf die angegebene Adresse verweist
cname.vercel-dns.com - Warte, bis DNS wirksam wird (normalerweise einige Minuten bis einige Stunden); Vercel beantragt automatisch ein SSL-Zertifikat
Nächste Lernrichtungen
Du beherrschst die Kernfähigkeiten von Vue3. Im Folgenden findest du einen fortgeschrittenen Pfad basierend auf verschiedenen Zielen:
| Lernrichtung | Für wen es geeignet ist | Empfohlener Einstiegspunkt |
|---|---|---|
| TypeScript + Vue3 | Du möchtest rigorosere Großprojekte schreiben | Füge TS-Typdefinitionen zum Projekt hinzu, beginnend mit props und store |
| Nuxt.js | Du brauchst SEO oder serverseitiges Rendering | Ein Full-Stack-Framework auf Basis von Vue3, Dateien als Routen, automatisches SSR |
| VueUse | Möchtest du fertige Composables verwenden | Vues offiziell empfohlene Sammlung von Composable-Funktionen mit 200+ Hilfsfunktionen |
| Komponentenbibliothek | Schnell ein Admin-Dashboard erstellen | Element Plus、Naive UI、Ant Design Vue |