Vite bygger React-, Vue-, Svelte-, Solid- og rene JavaScript-prosjekter til en mappe med statiske filer, dist/. Lobsite hoster den mappen. Kjør npm run build, så npx lobsite, og appen er live på en *.lobsite.app-adresse med HTTPS. Har appen ruting på klientsiden, får én innstilling dyplenker til å fungere.
Lage et nettleserspill med en Vite-mal? Phaser hosting guide dekker spillressurser, lerretsstørrelser og leketestbygg sammen med denne distribusjonsarbeidsflyten.
Slik fungerer det
- Bygg med
npm run build(altsåvite build). Appen havner idist/, med hashede filer idist/assets/. - Kjør
npx lobsitei prosjektet. Den deployerdist/, ikkepublic/, som Vite allerede har kopiert inn i bygget. Første deploy trenger ingen konto og varer i 6 timer. - Slå på single-page-modus hvis appen har en ruter: legg
spa = trueilobsite.toml, eller slå på Single-page-app i nettstedets innstillinger. Behold så nettstedet med krav-lenken, i en gratis konto.
Ruting og single-page-modus
En Vite-app med React Router, Vue Router eller TanStack Router har én index.html. Å åpne /settings direkte ber serveren om en fil som ikke finnes. Med single-page-modus på svarer Lobsite på slike stier med index.html, og ruteren tegner siden:
# lobsite.toml
spa = true
Bare sideforespørsler får appen. En manglende fil som en gammel /assets/index-3f9a.js får en ekte 404, så en besøkende som fortsatt har forrige versjon åpen etter en deploy, får en tydelig feil og ikke HTML i stedet for et skript. Deployen skriver ut et tips når package.json har en ruter og single-page-modus er av. Mer i dokumentasjonen.
vite.config og bygget
basestår på standard,/: appen leveres fra toppen av adressen. Sett den bare for et prosjektnettsted på GitHub Pages, og fjern den når du flytter.- Miljøvariabler som starter med
VITE_, skrives inn i bygget. Alle som åpner appen kan se dem, så hold hemmeligheter unna; selve.env-filene deployes aldri. - Flere sider (
build.rollupOptions.inputmed mer enn én HTML-fil) er et flersidig nettsted: hver side er en fil, og single-page-modus trengs ikke. npm run previewlevererdist/lokalt, den raskeste sjekken før en deploy.
Hurtigbuffer for hashede filer
Vite legger en hash av innholdet i filnavnet, som index-3f9a.js, så en fil med et gitt navn endres aldri. Lobsite lagrer også filer etter innhold, så en deploy laster bare opp delene som er endret. For å la nettlesere beholde disse filene i et år, legg til en header-regel:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html sjekkes alltid på nytt, så besøkende får den nye versjonen rett etter en deploy.
spa = true i lobsite.toml, eller én bryter i dashbordet: dyplenker åpner appen din, manglende filer gir fortsatt 404.
Filer lagres etter hash. Å deploye et uendret nettsted på nytt laster opp 0 byte.
Forhåndsvis før du går live. Rull tilbake med ett klikk, inkludert videresendinger.
Hvert nettsted får en *.lobsite.app-adresse med HTTPS fra første deploy.
Videresendinger, headere og skjemaer ligger i lobsite.toml og følger med hver deploy.
En deploy uten konto er live i 6 timer. Med krav-lenken beholder du den, gratis.
Vite-verter sammenlignet
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Dyplenker i en single-page-app | spa = true, eller en bryter i dashbordet |
En _redirects-regel |
En rewrite i vercel.json |
Nei: kopier index.html til 404.html, levert med status 404 |
| Manglende skriptfiler | 404 | Appens index.html |
Appens index.html |
404 |
| Bygger på serveren | Nei: du deployer dist/ |
Ja | Ja | I GitHub Actions |
| Konto før første deploy | Nei: live i 6 timer, så behold det gratis | Ja | Ja | Ja, og et repository |
| Eget domene | Ja, gratis | Ja | Ja | Ja |
Netlify og Vercel bygger fra Git og kjører serverfunksjoner. Lobsite er den raskeste måten å få en bygget Vite-app på nett fra maskinen din, CI eller en AI-agent, med single-page-ruting på én linje eller ett klikk.
Ofte stilte spørsmål
Hvorfor viser andre sider enn forsiden i Vite-appen min «Not found»?
Appen bruker ruting på klientsiden, og serveren har ingen fil for disse stiene. Slå på single-page-modus: spa = true i lobsite.toml, eller Single-page-app i nettstedets innstillinger.
Kjører Lobsite Vite-bygget mitt?
Nei. Bygg på maskinen din eller i CI, og deploy så dist/. Det du sjekket med npm run preview, er nøyaktig det som går live.
Kan jeg bruke Vite-miljøvariabler?
Ja, VITE_-variablene, som skrives inn i bygget når du kjører det. Bygg på nytt etter at du har endret dem. Alt hemmelig hører hjemme på en server, ikke i en Vite-app.
Trenger et flersidig Vite-nettsted single-page-modus?
Nei. Hver HTML-side er sin egen fil, og about.html åpnes på /about. La single-page-modus være av, så en feilskrevet adresse får 404.html.