Vite buduje projekty React, Vue, Svelte, Solid i czysty JavaScript do folderu z plikami statycznymi, dist/. Lobsite hostuje ten folder. Uruchom npm run build, potem npx lobsite, a aplikacja będzie działać pod adresem *.lobsite.app z HTTPS. Jeśli aplikacja ma routing po stronie klienta, jedno ustawienie sprawi, że głębokie linki zadziałają.
Tworzysz grę przeglądarkową z szablonem Vite? Przewodnik po hostingu Phaser obejmuje zasoby gier, rozmiar płótna i kompilacje testowe w ramach tego procesu wdrażania.
Jak to działa
- Zbuduj przez
npm run build(czylivite build). Aplikacja trafi dodist/, z plikami z hashem wdist/assets/. - Uruchom
npx lobsitew projekcie. Wdrażadist/, a niepublic/, który Vite już skopiował do builda. Pierwsze wdrożenie nie wymaga konta i trwa 6 godzin. - Włącz tryb jednostronicowy, jeśli aplikacja ma router: dodaj
spa = truedolobsite.tomlalbo włącz Aplikacja jednostronicowa w ustawieniach strony. Potem zachowaj stronę linkiem do przejęcia, na darmowym koncie.
Routing i tryb jednostronicowy
Aplikacja Vite z React Router, Vue Router lub TanStack Router ma jeden index.html. Bezpośrednie otwarcie /settings prosi serwer o plik, który nie istnieje. Z włączonym trybem jednostronicowym Lobsite odpowiada na takie ścieżki Twoim index.html, a router rysuje stronę:
# lobsite.toml
spa = true
Aplikację dostają tylko żądania stron. Brakujący plik, np. stary /assets/index-3f9a.js, dostaje prawdziwe 404, więc odwiedzający, który po wdrożeniu wciąż ma otwartą poprzednią wersję, zobaczy jasny błąd, a nie HTML zamiast skryptu. Wdrożenie wypisuje wskazówkę, gdy package.json zawiera router, a tryb jednostronicowy jest wyłączony. Więcej w dokumentacji.
vite.config i build
basezostaje domyślne,/: aplikacja jest serwowana z głównego poziomu adresu. Ustaw je tylko dla strony projektu w GitHub Pages i usuń przy przeprowadzce.- Zmienne środowiskowe zaczynające się od
VITE_są zapisywane w buildzie. Widzi je każdy, kto otworzy aplikację, więc nie trzymaj w nich sekretów; same pliki.envnigdy nie są wdrażane. - Kilka stron (
build.rollupOptions.inputz więcej niż jednym plikiem HTML) to strona wielostronicowa: każda strona jest plikiem, a tryb jednostronicowy nie jest potrzebny. npm run previewserwujedist/lokalnie, to najszybszy test przed wdrożeniem.
Cache plików z hashem
Vite umieszcza hash zawartości pliku w jego nazwie, np. index-3f9a.js, więc plik o danej nazwie nigdy się nie zmienia. Lobsite też przechowuje pliki według zawartości, więc wdrożenie wgrywa tylko zmienione fragmenty. Aby przeglądarki trzymały te pliki przez rok, dodaj regułę nagłówka:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html jest zawsze sprawdzany na nowo, więc odwiedzający dostają nową wersję zaraz po wdrożeniu.
spa = true w lobsite.toml lub jeden przełącznik w panelu: głębokie linki otwierają aplikację, brakujące pliki nadal dają 404.
Pliki są przechowywane według hasha. Ponowne wdrożenie niezmienionej strony wgrywa 0 bajtów.
Podgląd przed publikacją. Wycofanie jednym kliknięciem, razem z przekierowaniami.
Każda strona dostaje adres *.lobsite.app z HTTPS od pierwszego wdrożenia.
Przekierowania, nagłówki i formularze są w lobsite.toml i wędrują z każdym wdrożeniem.
Wdrożenie bez konta działa przez 6 godzin. Link do przejęcia pozwala je zatrzymać, za darmo.
Porównanie hostingów dla Vite
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Głębokie linki w aplikacji jednostronicowej | spa = true lub przełącznik w panelu |
Reguła w _redirects |
Rewrite w vercel.json |
Nie: skopiuj index.html do 404.html, serwowany ze statusem 404 |
| Brakujące pliki skryptów | 404 | index.html aplikacji |
index.html aplikacji |
404 |
| Build na serwerze | Nie: wdrażasz dist/ |
Tak | Tak | W GitHub Actions |
| Konto przed pierwszym wdrożeniem | Nie: 6 godzin online, potem zachowaj za darmo | Tak | Tak | Tak, i repozytorium |
| Własna domena | Tak, za darmo | Tak | Tak | Tak |
Netlify i Vercel budują z Gita i uruchamiają funkcje serwerowe. Lobsite to najszybszy sposób, by opublikować zbudowaną aplikację Vite z Twojego komputera, CI lub agenta AI, z routingiem jednostronicowym w jednej linii lub jednym kliknięciu.
Najczęstsze pytania
Dlaczego podstrony aplikacji Vite inne niż główna pokazują „Not found”?
Aplikacja używa routingu po stronie klienta, a serwer nie ma plików dla tych ścieżek. Włącz tryb jednostronicowy: spa = true w lobsite.toml albo Aplikacja jednostronicowa w ustawieniach strony.
Czy Lobsite uruchamia mój build Vite?
Nie. Zbuduj na swoim komputerze lub w CI, a potem wdróż dist/. To, co sprawdziłeś przez npm run preview, trafi online dokładnie tak samo.
Czy mogę używać zmiennych środowiskowych Vite?
Tak, tych z VITE_, które są zapisywane w buildzie podczas jego uruchomienia. Po ich zmianie zbuduj ponownie. Wszystko, co tajne, należy do serwera, nie do aplikacji Vite.
Czy wielostronicowa strona Vite potrzebuje trybu jednostronicowego?
Nie. Każda strona HTML to osobny plik, a about.html otwiera się pod /about. Zostaw tryb jednostronicowy wyłączony, by literówka w adresie dawała Twój 404.html.