Hosting statyczny Vue

Opublikuj
projekt Vue

Prześlij statyczny wynik z Vue, Vite, Vue CLI albo Nuxt i opublikuj go z fallbackiem history mode, HTTPS oraz własną domeną, gdy będzie potrzebna.

Pokaż kroki
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 i webpack gotowe

Wiedz, który folder Vue przesłać

Większość problemów z publikacją Vue zaczyna się przed hostingiem: zły folder wynikowy, zły base path albo build bez lokalnego podglądu.

Vite + Vue

npm run build
output: dist/

Vite domyślnie zapisuje build produkcyjny w `dist`. Jeśli konfiguracja zmienia `build.outDir` albo `base`, prześlij faktyczny folder wynikowy i przetestuj adresy zasobów.

Vue CLI

npm run build
output: dist/

Statyczne buildy Vue CLI zwykle publikuje się z `dist`. Jeśli aplikacja ma działać pod podścieżką, `publicPath` musi pasować do finalnej struktury URL.

Statyczny wynik Nuxt

nuxi generate
output: .output/public or dist/

Nuxt może tworzyć statyczny wynik, ale trasy serwerowe i API wymagają środowiska uruchomieniowego. W tym procesie prześlij tylko wygenerowane pliki publiczne.

Czego naprawdę wymaga Vue Router w history mode

Czyste adresy URL warto zachować

Trasy hash działają prawie wszędzie, ale adresy z fragmentem `#` wyglądają jak obejście i są niewygodne przy udostępnianiu, mierzeniu ruchu i dopracowaniu produktu.

Vue Router history mode daje czyste ścieżki, takie jak `/about` albo `/dashboard/settings`. W zamian host musi wiedzieć, że dla tras niebędących prawdziwymi plikami ma zwrócić `index.html`.

Jak DeployPages obsługuje history mode

Gdy żądanie nie pasuje do realnego zasobu statycznego, DeployPages zwraca główny `index.html` i pozwala Vue Routerowi rozwiązać widok w przeglądarce.

  • Bezpośrednie wejścia na zagnieżdżone trasy nie kończą się od razu twardym błędem.
  • Główny dokument wraca jako odpowiedź fallback.
  • Vue montuje aplikację, odczytuje bieżący URL i renderuje właściwą trasę.

Kontrole produkcyjne Vue

Aplikacja Vue może działać w devie i mimo to zepsuć się po przesłaniu. Te punkty łapią najczęstsze awarie przed wysłaniem linku.

Base path

Dla Vite sprawdź `base`. Dla Vue CLI sprawdź `publicPath`. Złe wartości zwykle objawiają się brakującym CSS, JS, fontami albo obrazami.

Fallback history mode

Otwórz zagnieżdżoną trasę bezpośrednio i odśwież ją. Jeśli strona nadal działa, fallback robi swoje.

Tylko statyczny wynik

DeployPages serwuje pliki statyczne. API routes, middleware serwerowe i zachowanie dostępne tylko w SSR wymagają osobnego backendu albo środowiska uruchomieniowego.

Lokalny podgląd

Użyj prawdziwego lokalnego serwera podglądu dla builda produkcyjnego. Otwieranie `dist/index.html` przez `file://` potrafi ukryć albo wywołać problemy inne niż w publikacji.

Proces publikacji Vue

01

Zbuduj zasoby statyczne

Uruchom build produkcyjny w Vite, Vue CLI albo statycznym trybie Nuxt, żeby aplikacja została wygenerowana jako pliki ładowane bezpośrednio przez przeglądarkę.

02

Znajdź folder wynikowy

Większość projektów Vue i Vite zapisuje wynik w `dist`. Projekty Nuxt statyczne zwykle publikują `.output/public` albo wygenerowany `dist`, zależnie od konfiguracji.

Statyczne buildy Nuxt zwykle przesyła się z `.output/public` albo `dist`, zależnie od konfiguracji projektu.

03

Prześlij i sprawdź linki

Prześlij cały folder wynikowy, a potem sprawdź deep linki, nawigację routera i ścieżki zasobów po opublikowaniu strony.

Typowe problemy przy publikacji Vue

Fix 01

Odświeżenie zagnieżdżonej trasy zwraca 404

Vue Router używa history mode, ale host szuka prawdziwego pliku. Użyj fallbacku SPA, aby nieznane trasy dokumentu zwracały `index.html`.

Fix 02

Pliki CSS albo JS zwracają 404

Sprawdź `base` w Vite albo `publicPath` w Vue CLI. Potwierdź też, że przesłany został cały folder `dist`, razem z wygenerowanymi zasobami.

Fix 03

Aplikacja działa w hash mode, ale nie w history mode

Hash mode trzyma routing po znaku `#` w przeglądarce. History mode używa czystych URL-i i wymaga fallbacku hosta dla bezpośrednich wejść.

Fix 04

Wynik Nuxt nie ma zachowania serwerowego

Statyczny wynik Nuxt można opublikować jako pliki. Trasy serwerowe Nuxt, middleware serwerowe i zachowanie zależne od SSR wymagają środowiska serwerowego.

FAQ publikacji Vue

Dlaczego pliki CSS i JS zwracają 404?

Zwykle oznacza to, że ścieżki zasobów zostały zbudowane dla innego base URL albo katalog zasobów nie został przesłany. W Vite sprawdź `base`, w Vue CLI `publicPath`.

Czy to obsługuje Nuxt?

Tak dla statycznego wyniku. Najpierw wygeneruj statyczną stronę, a potem prześlij folder publiczny. DeployPages nie jest właściwym celem dla renderowania serwerowego Nuxt ani server API routes.

Czy wybrać hash mode czy history mode?

Użyj history mode, gdy chcesz czyste adresy URL i host obsługuje fallback do `index.html`. Hash mode jest prostszy w hostowaniu, ale zostawia `#` w każdej trasie klienta.

Czy mam przesłać projekt źródłowy Vue?

Nie. Prześlij folder produkcyjny, zwykle `dist`. Projekt źródłowy zawiera pliki developerskie i zależności, których nie serwuje się bezpośrednio.

Czy stan Pinia albo Vuex przetrwa odświeżenie?

Nie automatycznie. Odświeżenie przeglądarki resetuje stan w pamięci klienta. Ważny stan zapisz w localStorage albo przez wybrany mechanizm persystencji.

Czy mogę przywrócić poprzednią wersję?

Tak. DeployPages przechowuje historię publikacji, więc w razie potrzeby możesz wrócić do wcześniejszego statycznego builda.