Hébergez une app Vue : Vite, Vue Router en mode history

Q: Puis-je déployer un site Nuxt sur Lobsite ?

Oui, un site généré : lancez npx nuxi generate, puis npx lobsite .output/public. Les pages qui ont besoin du serveur de Nuxt, comme les routes serveur, ne fonctionneront pas.

Q: Comment afficher une vue « page introuvable » dans une application Vue ?

Ajoutez une route fourre-tout à la fin de vos routes, { path: "/:pathMatch(.)", component: NotFound }. Avec le mode monopage, tout chemin de page inconnu arrive à l’application, et c’est le routeur qui décide quoi afficher.

Une application Vue créée avec npm create vue@latest est buildée par Vite dans dist/ : un index.html et le JavaScript qui dessine chaque page. Lobsite héberge ce dossier. Lancez npm run build, puis npx lobsite, et l’application est en ligne à une adresse *.lobsite.app en HTTPS. Le mode history de Vue Router fonctionne dès que le mode monopage est activé.

Comment ça marche

Buildez l’application avec npm run build. Vite l’écrit dans dist/.
Lancez npx lobsite dans le projet. Il déploie dist/, pas public/, que Vite copie dans le build. Le premier déploiement ne demande pas de compte et dure 6 heures.
Activez le mode monopage pour Vue Router : spa = true dans lobsite.toml, ou Application monopage dans les réglages du site. Gardez le site grâce au lien de récupération, dans un compte gratuit.

Mode history de Vue Router

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

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

createWebHistory() donne des adresses propres comme /projects/7. En ouvrir une directement demande au serveur un fichier qui n’existe pas ; le mode monopage répond avec votre index.html, et Vue Router affiche la bonne vue.
createWebHashHistory() (adresses comme /#/projects/7) fonctionne sans mode monopage, puisque le serveur ne voit que /. Les adresses propres sont meilleures pour le partage et les moteurs de recherche.
Une route fourre-tout (path: "/:pathMatch(.*)*") accueille la vue « page introuvable » de votre application, car avec le mode monopage tout chemin de page inconnu arrive à l’application.

Nuxt et la Vue CLI

Nuxt construit un site statique avec npx nuxi generate, dans .output/public/. Ce dossier n’est pas trouvé tout seul : indiquez-le une fois, npx lobsite .output/public, et il est mémorisé dans lobsite.toml. Chaque page est générée en fichier séparé, donc le mode monopage n’est utile que pour les routes que Nuxt n’a pas générées. Les routes serveur et le rendu serveur de Nuxt exigent un hébergeur qui exécute Node.
La Vue CLI (@vue/cli-service) est en maintenance, et les nouveaux projets utilisent Vite. Un projet Vue CLI existant builde dans dist/, qui se déploie de la même façon.

Applications monopages

spa = true dans lobsite.toml, ou un interrupteur dans le tableau de bord : les liens profonds ouvrent votre application, les fichiers manquants renvoient toujours 404.

Seuls les fichiers modifiés sont envoyés

Les fichiers sont stockés selon leur hash. Redéployer un site inchangé envoie 0 octet.

Chaque déploiement a son URL

Prévisualisez avant la mise en ligne. Revenez en arrière en un clic, redirections comprises.

HTTPS partout

Chaque site reçoit une adresse *.lobsite.app en HTTPS dès le premier déploiement.

Des formulaires qui marchent, tout simplement

Faites pointer un formulaire vers /_lobsite/forms/contact. Filtrage du spam inclus.

Essai sans compte

Un déploiement sans compte reste en ligne 6 heures. Le lien de récupération le conserve, gratuitement.

Hébergeurs Vue comparés

	Lobsite	Netlify	Vercel	GitHub Pages
Mode history de Vue Router	`spa = true`, ou un interrupteur dans le tableau de bord	Une règle `_redirects`	Une réécriture dans `vercel.json`	Non : mode hash, ou `404.html` servi avec un statut 404
Fichiers de script manquants après un déploiement	404, une erreur claire	Le `index.html` de l’application	Le `index.html` de l’application	404
Rendu serveur Nuxt	Non	Oui	Oui	Non
Compte avant le premier déploiement	Non : en ligne 6 heures, puis à garder gratuitement	Oui	Oui	Oui, et un dépôt
Formulaires sans backend	Oui, une fois le site dans un compte	Oui	Non	Non
Domaine personnalisé	Oui, gratuit	Oui	Oui	Oui

Pour une application Vue qui tourne dans le navigateur, Lobsite, c’est une commande de dist/ à une adresse en ligne, avec le mode history à un réglage près et une URL d’aperçu pour chaque déploiement.

Questions fréquentes

Pourquoi les pages Vue Router affichent-elles « Not found » quand on les recharge ?

Les adresses en mode history n’existent que dans l’application. Activez le mode monopage, spa = true dans lobsite.toml ou Application monopage dans les réglages du site, pour que ces chemins ouvrent votre index.html.

Une application Vue sur Lobsite doit-elle utiliser le mode hash ou history ?

Le mode history, avec le mode monopage activé. Les adresses sont plus propres et les moteurs de recherche les traitent comme des pages distinctes. Le mode hash ne vaut le coup que là où vous ne pouvez pas modifier les réglages du serveur.

Puis-je déployer un site Nuxt sur Lobsite ?

Oui, un site généré : lancez npx nuxi generate, puis npx lobsite .output/public. Les pages qui ont besoin du serveur de Nuxt, comme les routes serveur, ne fonctionneront pas.

Comment afficher une vue « page introuvable » dans une application Vue ?

Ajoutez une route fourre-tout à la fin de vos routes, { path: "/:pathMatch(.*)*", component: NotFound }. Avec le mode monopage, tout chemin de page inconnu arrive à l’application, et c’est le routeur qui décide quoi afficher.

Hébergement d’apps Vue