Host een Vue-app: Vite, Vue Router in history-modus

Q: Kan ik een Nuxt-site op Lobsite deployen?

Ja, een gegenereerde: voer npx nuxi generate uit, dan npx lobsite .output/public. Pagina's die de server van Nuxt nodig hebben, zoals serverroutes, werken niet.

Q: Hoe toon ik een ‘pagina niet gevonden’-weergave in een Vue-app?

Voeg aan het eind van je routes een catch-all-route toe, { path: "/:pathMatch(.)", component: NotFound }. Met de single-page-modus aan komt elk onbekend paginapad bij de app, dus de router bepaalt wat er wordt getoond.

Een Vue-app gemaakt met npm create vue@latest wordt door Vite gebouwd naar dist/: één index.html en het JavaScript dat elke pagina tekent. Lobsite host die map. Voer npm run build uit, dan npx lobsite, en de app staat live op een *.lobsite.app-adres met HTTPS. De history-modus van Vue Router werkt zodra de single-page-modus aan staat.

Zo werkt het

Bouw de app met npm run build. Vite schrijft hem naar dist/.
Voer npx lobsite uit in het project. Het deployt dist/, niet public/, dat Vite naar de build kopieert. De eerste deploy heeft geen account nodig en duurt 6 uur.
Zet de single-page-modus aan voor Vue Router: spa = true in lobsite.toml, of Single-page-app in de instellingen van de site. Houd de site met de claimlink, in een gratis account.

History-modus van Vue Router

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

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

createWebHistory() geeft nette adressen zoals /projects/7. Wie er een direct opent, vraagt de server om een bestand dat niet bestaat; de single-page-modus antwoordt met je index.html, en Vue Router toont de juiste weergave.
createWebHashHistory() (adressen zoals /#/projects/7) werkt zonder single-page-modus, omdat de server alleen / ziet. Nette adressen zijn beter om te delen en voor zoekmachines.
Een catch-all-route (path: "/:pathMatch(.*)*") is waar de eigen ‘pagina niet gevonden’-weergave van je app komt, want met single-page-modus komt elk onbekend paginapad bij de app terecht.

Nuxt en de Vue CLI

Nuxt bouwt een statische site met npx nuxi generate, naar .output/public/. Die map wordt niet vanzelf gevonden, dus geef hem één keer op, npx lobsite .output/public, en hij wordt onthouden in lobsite.toml. Elke pagina wordt als eigen bestand gegenereerd, dus de single-page-modus is alleen nodig voor routes die Nuxt niet heeft gegenereerd. Serverroutes en serverrendering van Nuxt hebben een host nodig die Node draait.
De Vue CLI (@vue/cli-service) zit in onderhoudsmodus, en nieuwe projecten gebruiken Vite. Een bestaand Vue CLI-project bouwt naar dist/, dat op dezelfde manier wordt gedeployd.

Single-page-apps

spa = true in lobsite.toml, of één schakelaar in het dashboard: deeplinks openen je app, ontbrekende bestanden geven nog steeds 404.

Alleen gewijzigde bestanden worden geüpload

Bestanden worden op hun hash opgeslagen. Een ongewijzigde site opnieuw deployen uploadt 0 bytes.

Elke deploy krijgt een URL

Bekijk een voorbeeld voordat het live gaat. Zet in één klik terug, inclusief doorverwijzingen.

Overal HTTPS

Elke site krijgt vanaf de eerste deploy een *.lobsite.app-adres met HTTPS.

Formulieren die gewoon werken

Laat een formulier wijzen naar /_lobsite/forms/contact. Spamfilter inbegrepen.

Proberen zonder account

Een deploy zonder account is 6 uur live. Met de claimlink houd je hem, gratis.

Vue-hosts vergeleken

	Lobsite	Netlify	Vercel	GitHub Pages
History-modus van Vue Router	`spa = true`, of een schakelaar in het dashboard	Een `_redirects`-regel	Een rewrite in `vercel.json`	Nee: hash-modus, of `404.html` met status 404
Ontbrekende scriptbestanden na een deploy	404, een duidelijke fout	De `index.html` van de app	De `index.html` van de app	404
Serverrendering met Nuxt	Nee	Ja	Ja	Nee
Account vóór de eerste deploy	Nee: 6 uur live, daarna gratis houden	Ja	Ja	Ja, en een repository
Formulieren zonder backend	Ja, zodra de site in een account staat	Ja	Nee	Nee
Eigen domein	Ja, gratis	Ja	Ja	Ja

Voor een Vue-app die in de browser draait, is Lobsite één opdracht van dist/ naar een live adres, met de history-modus één instelling verderop en een voorbeeld-URL voor elke deploy.

Veelgestelde vragen

Waarom tonen Vue Router-pagina's ‘Not found’ als ik ze herlaad?

Adressen in history-modus bestaan alleen binnen de app. Zet de single-page-modus aan, spa = true in lobsite.toml of Single-page-app in de instellingen van de site, zodat die paden je index.html openen.

Moet een Vue-app op Lobsite hash- of history-modus gebruiken?

History-modus, met de single-page-modus aan. De adressen zijn netter en zoekmachines behandelen ze als aparte pagina's. Hash-modus is alleen de moeite waard waar je de instellingen van de server niet kunt veranderen.

Kan ik een Nuxt-site op Lobsite deployen?

Ja, een gegenereerde: voer npx nuxi generate uit, dan npx lobsite .output/public. Pagina's die de server van Nuxt nodig hebben, zoals serverroutes, werken niet.

Hoe toon ik een ‘pagina niet gevonden’-weergave in een Vue-app?

Voeg aan het eind van je routes een catch-all-route toe, { path: "/:pathMatch(.*)*", component: NotFound }. Met de single-page-modus aan komt elk onbekend paginapad bij de app, dus de router bepaalt wat er wordt getoond.

Vue-apps hosten