Aloja una app Vue: Vite, Vue Router en modo history

Q: ¿Puedo desplegar un sitio de Nuxt en Lobsite?

Sí, uno generado: ejecuta npx nuxi generate y luego npx lobsite .output/public. Las páginas que necesitan el servidor de Nuxt, como las rutas de servidor, no funcionarán.

Q: ¿Cómo muestro una vista de «página no encontrada» en una app de Vue?

Añade una ruta comodín al final de tus rutas, { path: "/:pathMatch(.)", component: NotFound }. Con el modo de una sola página activado, cualquier ruta de página desconocida llega a la app, así que el router decide qué mostrar.

Una app de Vue creada con npm create vue@latest la compila Vite en dist/: un index.html y el JavaScript que dibuja cada página. Lobsite aloja esa carpeta. Ejecuta npm run build, luego npx lobsite, y la app estará publicada en una dirección *.lobsite.app con HTTPS. El modo history de Vue Router funciona en cuanto activas el modo de una sola página.

Cómo funciona

Compila la app con npm run build. Vite la escribe en dist/.
Ejecuta npx lobsite en el proyecto. Despliega dist/, no public/, que Vite copia al build. El primer deploy no necesita cuenta y dura 6 horas.
Activa el modo de una sola página para Vue Router: spa = true en lobsite.toml o Aplicación de una sola página en los ajustes del sitio. Conserva el sitio con el enlace para reclamarlo, en una cuenta gratuita.

Modo history de Vue Router

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

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

createWebHistory() da direcciones limpias como /projects/7. Abrir una directamente pide al servidor un archivo que no existe; el modo de una sola página responde con tu index.html y Vue Router muestra la vista correcta.
createWebHashHistory() (direcciones como /#/projects/7) funciona sin el modo de una sola página, porque el servidor solo ve /. Las direcciones limpias son mejores para compartir y para los buscadores.
Una ruta comodín (path: "/:pathMatch(.*)*") es donde va la vista de «página no encontrada» de tu app, ya que con el modo de una sola página cualquier ruta de página desconocida llega a la app.

Nuxt y la Vue CLI

Nuxt genera un sitio estático con npx nuxi generate, en .output/public/. Esa carpeta no se encuentra sola, así que indícala una vez, npx lobsite .output/public, y se recuerda en lobsite.toml. Cada página se genera como su propio archivo, así que el modo de una sola página solo hace falta para rutas que Nuxt no generó. Las rutas de servidor y el renderizado en servidor de Nuxt necesitan un hosting que ejecute Node.
La Vue CLI (@vue/cli-service) está en modo mantenimiento y los proyectos nuevos usan Vite. Un proyecto existente de Vue CLI compila en dist/, que se despliega igual.

Aplicaciones de una sola página

spa = true en lobsite.toml o un interruptor en el panel: los enlaces profundos abren tu app y los archivos que faltan siguen dando 404.

Solo se suben los archivos modificados

Los archivos se guardan por su hash. Volver a desplegar un sitio sin cambios sube 0 bytes.

Cada deploy tiene su URL

Previsualiza antes de publicar. Vuelve atrás con un clic, redirecciones incluidas.

HTTPS en todas partes

Cada sitio recibe una dirección *.lobsite.app con HTTPS desde el primer deploy.

Formularios que simplemente funcionan

Apunta un formulario a /_lobsite/forms/contact. Filtro de spam incluido.

Pruébalo sin cuenta

Un deploy sin cuenta está publicado 6 horas. El enlace para reclamarlo lo conserva, gratis.

Comparativa de hostings para Vue

	Lobsite	Netlify	Vercel	GitHub Pages
Modo history de Vue Router	`spa = true` o un interruptor en el panel	Una regla en `_redirects`	Un rewrite en `vercel.json`	No: modo hash, o `404.html` servido con estado 404
Archivos de script que faltan tras un deploy	404, un error claro	El `index.html` de la app	El `index.html` de la app	404
Renderizado en servidor de Nuxt	No	Sí	Sí	No
Cuenta antes del primer deploy	No: publicado 6 horas, luego consérvalo gratis	Sí	Sí	Sí, y un repositorio
Formularios sin backend	Sí, cuando el sitio está en una cuenta	Sí	No	No
Dominio propio	Sí, gratis	Sí	Sí	Sí

Para una app de Vue que se ejecuta en el navegador, Lobsite es un comando de dist/ a una dirección publicada, con el modo history a un ajuste de distancia y una URL de vista previa para cada deploy.

Preguntas frecuentes

¿Por qué las páginas de Vue Router muestran «Not found» al recargarlas?

Las direcciones en modo history solo existen dentro de la app. Activa el modo de una sola página, spa = true en lobsite.toml o Aplicación de una sola página en los ajustes del sitio, para que esas rutas abran tu index.html.

¿Una app de Vue en Lobsite debe usar modo hash o history?

Modo history, con el modo de una sola página activado. Las direcciones son más limpias y los buscadores las tratan como páginas separadas. El modo hash solo compensa donde no puedes cambiar los ajustes del servidor.

¿Puedo desplegar un sitio de Nuxt en Lobsite?

Sí, uno generado: ejecuta npx nuxi generate y luego npx lobsite .output/public. Las páginas que necesitan el servidor de Nuxt, como las rutas de servidor, no funcionarán.

¿Cómo muestro una vista de «página no encontrada» en una app de Vue?

Añade una ruta comodín al final de tus rutas, { path: "/:pathMatch(.*)*", component: NotFound }. Con el modo de una sola página activado, cualquier ruta de página desconocida llega a la app, así que el router decide qué mostrar.

Hosting de apps Vue