Host en Vue-app: Vite, Vue Router i history-modus

Q: Kan jeg deploye et Nuxt-nettsted til Lobsite?

Ja, et generert: kjør npx nuxi generate, så npx lobsite .output/public. Sider som trenger Nuxts server, som serverruter, vil ikke kjøre.

Q: Hvordan viser jeg en «siden finnes ikke»-visning i en Vue-app?

Legg til en catch-all-rute sist i rutene dine, { path: "/:pathMatch(.)", component: NotFound }. Med single-page-modus på når alle ukjente sidestier appen, så ruteren bestemmer hva som vises.

En Vue-app laget med npm create vue@latest bygges av Vite til dist/: én index.html og JavaScript-en som tegner hver side. Lobsite hoster den mappen. Kjør npm run build, så npx lobsite, og appen er live på en *.lobsite.app-adresse med HTTPS. History-modusen i Vue Router fungerer så snart single-page-modus er på.

Slik fungerer det

Bygg appen med npm run build. Vite skriver den til dist/.
Kjør npx lobsite i prosjektet. Den deployer dist/, ikke public/, som Vite kopierer inn i bygget. Første deploy trenger ingen konto og varer i 6 timer.
Slå på single-page-modus for Vue Router: spa = true i lobsite.toml, eller Single-page-app i nettstedets innstillinger. Behold nettstedet med krav-lenken, i en gratis konto.

History-modus i Vue Router

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createWebHistory() gir rene adresser som /projects/7. Å åpne en direkte ber serveren om en fil som ikke finnes; single-page-modus svarer med index.html, og Vue Router viser riktig visning.
createWebHashHistory() (adresser som /#/projects/7) fungerer uten single-page-modus, siden serveren bare ser /. Rene adresser er bedre for deling og for søkemotorer.
En catch-all-rute (path: "/:pathMatch(.*)*") er stedet for appens egen «siden finnes ikke»-visning, siden alle ukjente sidestier når appen med single-page-modus.

Nuxt og Vue CLI

Nuxt bygger et statisk nettsted med npx nuxi generate, til .output/public/. Den mappen blir ikke funnet av seg selv, så oppgi den én gang, npx lobsite .output/public, så huskes den i lobsite.toml. Hver side genereres som egen fil, så single-page-modus trengs bare for ruter Nuxt ikke genererte. Nuxts serverruter og serverrendering trenger en vert som kjører Node.
Vue CLI (@vue/cli-service) er i vedlikeholdsmodus, og nye prosjekter bruker Vite. Et eksisterende Vue CLI-prosjekt bygger til dist/, som deployes på samme måte.

Single-page-apper

spa = true i lobsite.toml, eller én bryter i dashbordet: dyplenker åpner appen din, manglende filer gir fortsatt 404.

Bare endrede filer lastes opp

Filer lagres etter hash. Å deploye et uendret nettsted på nytt laster opp 0 byte.

Hver deploy får en URL

Forhåndsvis før du går live. Rull tilbake med ett klikk, inkludert videresendinger.

HTTPS overalt

Hvert nettsted får en *.lobsite.app-adresse med HTTPS fra første deploy.

Skjemaer som bare fungerer

Pek et skjema mot /_lobsite/forms/contact. Spamfilter inkludert.

Prøv uten konto

En deploy uten konto er live i 6 timer. Med krav-lenken beholder du den, gratis.

Vue-verter sammenlignet

	Lobsite	Netlify	Vercel	GitHub Pages
History-modus i Vue Router	`spa = true`, eller en bryter i dashbordet	En `_redirects`-regel	En rewrite i `vercel.json`	Nei: hash-modus, eller `404.html` levert med status 404
Manglende skriptfiler etter en deploy	404, en tydelig feil	Appens `index.html`	Appens `index.html`	404
Serverrendering med Nuxt	Nei	Ja	Ja	Nei
Konto før første deploy	Nei: live i 6 timer, så behold det gratis	Ja	Ja	Ja, og et repository
Skjemaer uten backend	Ja, når nettstedet er i en konto	Ja	Nei	Nei
Eget domene	Ja, gratis	Ja	Ja	Ja

For en Vue-app som kjører i nettleseren, er Lobsite én kommando fra dist/ til en live adresse, med history-modus én innstilling unna og en forhåndsvisnings-URL for hver deploy.

Ofte stilte spørsmål

Hvorfor viser Vue Router-sider «Not found» når de lastes på nytt?

Adresser i history-modus finnes bare inne i appen. Slå på single-page-modus, spa = true i lobsite.toml eller Single-page-app i nettstedets innstillinger, så disse stiene åpner index.html.

Bør en Vue-app på Lobsite bruke hash- eller history-modus?

History-modus, med single-page-modus på. Adressene er renere, og søkemotorer behandler dem som egne sider. Hash-modus lønner seg bare der du ikke kan endre serverens innstillinger.

Kan jeg deploye et Nuxt-nettsted til Lobsite?

Ja, et generert: kjør npx nuxi generate, så npx lobsite .output/public. Sider som trenger Nuxts server, som serverruter, vil ikke kjøre.

Hvordan viser jeg en «siden finnes ikke»-visning i en Vue-app?

Legg til en catch-all-rute sist i rutene dine, { path: "/:pathMatch(.*)*", component: NotFound }. Med single-page-modus på når alle ukjente sidestier appen, så ruteren bestemmer hva som vises.

Hosting av Vue-apper