Ospita un'app Vue: Vite, Vue Router in modalità history

Q: Posso pubblicare un sito Nuxt su Lobsite?

Sì, uno generato: esegui npx nuxi generate, poi npx lobsite .output/public. Le pagine che hanno bisogno del server di Nuxt, come le server route, non funzioneranno.

Q: Come mostro una vista «pagina non trovata» in un'app Vue?

Aggiungi una route catch-all in fondo alle tue route, { path: "/:pathMatch(.)", component: NotFound }. Con la modalità a pagina singola attiva, ogni percorso di pagina sconosciuto arriva all'app, quindi è il router a decidere cosa mostrare.

Un'app Vue creata con npm create vue@latest viene compilata da Vite in dist/: un index.html e il JavaScript che disegna ogni pagina. Lobsite ospita quella cartella. Esegui npm run build, poi npx lobsite, e l'app è online a un indirizzo *.lobsite.app con HTTPS. La modalità history di Vue Router funziona non appena attivi la modalità a pagina singola.

Come funziona

Fai la build dell'app con npm run build. Vite la scrive in dist/.
Esegui npx lobsite nel progetto. Pubblica dist/, non public/, che Vite copia nella build. Il primo deploy non richiede account e dura 6 ore.
Attiva la modalità a pagina singola per Vue Router: spa = true in lobsite.toml, o App a pagina singola nelle impostazioni del sito. Tieni il sito con il link per rivendicarlo, in un account gratuito.

Modalità history di Vue Router

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

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

createWebHistory() dà indirizzi puliti come /projects/7. Aprirne uno direttamente chiede al server un file che non esiste; la modalità a pagina singola risponde con il tuo index.html e Vue Router mostra la vista giusta.
createWebHashHistory() (indirizzi come /#/projects/7) funziona senza modalità a pagina singola, perché il server vede solo /. Gli indirizzi puliti sono migliori da condividere e per i motori di ricerca.
Una route catch-all (path: "/:pathMatch(.*)*") è dove va la vista «pagina non trovata» della tua app, perché con la modalità a pagina singola ogni percorso di pagina sconosciuto arriva all'app.

Nuxt e la Vue CLI

Nuxt genera un sito statico con npx nuxi generate, in .output/public/. Quella cartella non viene trovata da sola, quindi indicala una volta, npx lobsite .output/public, e viene ricordata in lobsite.toml. Ogni pagina è generata come file a sé, quindi la modalità a pagina singola serve solo per le route che Nuxt non ha generato. Le server route e il rendering lato server di Nuxt richiedono un hosting che esegua Node.
La Vue CLI (@vue/cli-service) è in manutenzione e i nuovi progetti usano Vite. Un progetto Vue CLI esistente compila in dist/, che si pubblica allo stesso modo.

App a pagina singola

spa = true in lobsite.toml, o un interruttore nella dashboard: i link diretti aprono la tua app, i file mancanti danno ancora 404.

Si caricano solo i file modificati

I file vengono salvati in base al loro hash. Ripubblicare un sito invariato carica 0 byte.

Ogni deploy ha il suo URL

Anteprima prima di andare online. Rollback in un clic, reindirizzamenti compresi.

HTTPS ovunque

Ogni sito riceve un indirizzo *.lobsite.app con HTTPS dal primo deploy.

Moduli che funzionano e basta

Fai puntare un modulo a /_lobsite/forms/contact. Filtro antispam incluso.

Provalo senza account

Un deploy senza account resta online per 6 ore. Il link per rivendicarlo lo conserva, gratis.

Hosting per Vue a confronto

	Lobsite	Netlify	Vercel	GitHub Pages
Modalità history di Vue Router	`spa = true`, o un interruttore nella dashboard	Una regola in `_redirects`	Un rewrite in `vercel.json`	No: modalità hash, o `404.html` servito con stato 404
File di script mancanti dopo un deploy	404, un errore chiaro	L'`index.html` dell'app	L'`index.html` dell'app	404
Rendering lato server di Nuxt	No	Sì	Sì	No
Account prima del primo deploy	No: online 6 ore, poi tienilo gratis	Sì	Sì	Sì, e un repository
Moduli senza backend	Sì, quando il sito è in un account	Sì	No	No
Dominio personalizzato	Sì, gratis	Sì	Sì	Sì

Per un'app Vue che gira nel browser, Lobsite è un comando da dist/ a un indirizzo online, con la modalità history a un'impostazione di distanza e un URL di anteprima per ogni deploy.

Domande frequenti

Perché le pagine di Vue Router mostrano «Not found» quando le ricarico?

Gli indirizzi in modalità history esistono solo dentro l'app. Attiva la modalità a pagina singola, spa = true in lobsite.toml o App a pagina singola nelle impostazioni del sito, così quei percorsi aprono il tuo index.html.

Un'app Vue su Lobsite dovrebbe usare la modalità hash o history?

History, con la modalità a pagina singola attiva. Gli indirizzi sono più puliti e i motori di ricerca li trattano come pagine separate. La modalità hash conviene solo dove non puoi cambiare le impostazioni del server.

Posso pubblicare un sito Nuxt su Lobsite?

Sì, uno generato: esegui npx nuxi generate, poi npx lobsite .output/public. Le pagine che hanno bisogno del server di Nuxt, come le server route, non funzioneranno.

Come mostro una vista «pagina non trovata» in un'app Vue?

Aggiungi una route catch-all in fondo alle tue route, { path: "/:pathMatch(.*)*", component: NotFound }. Con la modalità a pagina singola attiva, ogni percorso di pagina sconosciuto arriva all'app, quindi è il router a decidere cosa mostrare.

Hosting per app Vue