0Pricing
Vue Academy · Lekcja

Wdrażanie na platformach hostingowych

Wdrażanie aplikacji Vue na hostingach statycznych i platformach.

Wdrażanie na platformach hostingowych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Publikowanie aplikacji

Aplikacja Vue typu SPA jest budowana do postaci statycznych plików, więc można ją hostować na dowolnym hoście statycznym. Platformy takie jak Netlify, Vercel i GitHub Pages umożliwiają szybkie i często bezpłatne wdrażanie tych plików.

Co należy wdrożyć

Należy wdrożyć zawartość folderu dist utworzonego przez npm run build. Host udostępnia te pliki użytkownikom na całym świecie za pośrednictwem CDN.

npm run build
# upload the dist/ folder to your host

Wdrażanie na Netlify

Netlify może budować aplikację z repozytorium Git. Należy podać polecenie budowania oraz folder, który ma zostać opublikowany.

# Netlify settings
# Build command: npm run build
# Publish directory: dist

Wdrażanie na Vercel

Vercel automatycznie wykrywa projekty Vite. Należy połączyć repozytorium, a platforma uruchomi build, udostępni wynik i ponowi wdrożenie po każdym przesłaniu zmian.

# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist

Wdrażanie na GitHub Pages

GitHub Pages udostępnia statyczne pliki z repozytorium. Należy zbudować aplikację lokalnie lub w CI, a następnie przesłać wynik dist do gałęzi Pages albo użyć akcji.

Problem z trybem history

Vue Router w trybie history tworzy czytelne adresy URL, takie jak /about. Host statyczny nie ma jednak rzeczywistego pliku /about, więc bezpośrednie wejście na ten adres lub odświeżenie strony zwraca błąd 404.

Rozwiązanie z przekierowaniem SPA

Rozwiązaniem jest poinstruowanie serwera, aby dla wszystkich tras udostępniał plik index.html, pozostawiając obsługę routingu po stronie klienta Vue Router.

Reguła przekierowania Netlify

Na Netlify należy dodać plik _redirects albo regułę w netlify.toml, która przepisuje wszystkie ścieżki na index.html.

# public/_redirects
/*    /index.html   200

Reguła przepisywania Vercel

Na Vercel reguła rewrite w pliku vercel.json zapewnia taki sam fallback do index.html.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Konfiguracja ścieżki bazowej

Jeśli aplikacja jest udostępniana z podścieżki, co często zdarza się na GitHub Pages, na przykład /my-repo/, należy ustawić opcję base w konfiguracji Vite, aby adresy URL zasobów były poprawnie rozwiązywane.

// vite.config.js
export default {
  base: "/my-repo/"
}

Wdrażanie z użyciem CI

Wdrożenia należy zautomatyzować za pomocą ciągłej integracji. Workflow instaluje zależności, uruchamia testy, buduje aplikację i publikuje ją po każdym przesłaniu zmian do głównej gałęzi, dzięki czemu publikowanie nie wymaga ręcznej obsługi.

# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/

Szybki test

Sprawdź swoją wiedzę na temat wdrażania.

Podsumowanie

Należy wdrożyć folder dist na hoście statycznym, takim jak Netlify, Vercel lub GitHub Pages. Trzeba dodać fallback SPA, czyli przekierowanie lub przepisywanie do index.html, aby trasy w trybie history działały po odświeżeniu, ustawić Vite base dla hostingu z podścieżki i zautomatyzować całość za pomocą CI. W następnym kroku zajmą się Państwo monitorowaniem i utrzymaniem aplikacji na produkcji.

Często zadawane pytania

Czy lekcja „Wdrażanie na platformach hostingowych” jest bezpłatna?

Tak — pełny tekst „Wdrażanie na platformach hostingowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Wdrażanie na platformach hostingowych”?

Wdrażanie aplikacji Vue na hostingach statycznych i platformach. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Wdrażanie na platformach hostingowych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Optymalizacja procesu budowania
  2. Wdrażanie na platformach hostingowych
  3. Monitorowanie i utrzymanie
← Powrót do Vue Academy