Hosting estático para Vue

Publica tu
proyecto Vue

Sube la salida estática de Vue, Vite, Vue CLI o Nuxt y publícala con fallback para history mode, HTTPS y dominio personalizado cuando lo necesites.

Ver pasos
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
// Use a deploy-safe asset base
base: './',
build: {
outDir: 'dist'
}
})
Listo para Vite y webpack

Identifica qué carpeta Vue debes subir

Muchos problemas empiezan antes de publicar: carpeta equivocada, ruta base incorrecta o build sin vista previa local.

Vite + Vue

npm run build
output: dist/

Vite coloca el build de producción en `dist` por defecto. Si la configuración cambia `build.outDir` o `base`, sube la carpeta real y prueba URLs de archivos estáticos.

Vue CLI

npm run build
output: dist/

Vue CLI suele publicar desde `dist`. Si la app se sirve desde una subruta, `publicPath` debe coincidir con la URL final.

Salida estática de Nuxt

nuxi generate
output: .output/public o dist/

Nuxt puede generar salida estática, pero rutas SSR y APIs de servidor necesitan otro runtime. Para este flujo sube solo los archivos públicos generados.

Qué necesita realmente Vue Router en history mode

Las URLs limpias ayudan a compartir mejor

Las rutas con hash funcionan casi en cualquier plataforma estática, pero las URLs con `#` se sienten como una solución de emergencia y son menos cómodas para compartir o medir.

Vue Router en history mode te da rutas limpias como `/about` o `/dashboard/settings`. A cambio, la plataforma debe saber servir `index.html` cuando la ruta no corresponde a un archivo real.

Cómo DeployPages maneja history mode

Cuando una solicitud no coincide con un recurso estático real, DeployPages sirve el `index.html` raíz y deja que Vue Router resuelva la vista en el navegador.

  • Las visitas directas a rutas anidadas no fallan de inmediato.
  • El documento raíz vuelve como respuesta fallback.
  • Vue monta la app, lee la URL actual y renderiza la ruta correcta.

Revisiones de producción para Vue

Una app Vue puede funcionar en dev y fallar después de subirla. Estas revisiones atrapan los errores comunes antes de compartir el enlace.

Ruta base

En Vite revisa `base`; en Vue CLI revisa `publicPath`. Valores incorrectos suelen aparecer como CSS, JS, fuentes o imágenes faltantes.

Fallback de history mode

Abre una ruta anidada directamente y refresca. Si la página sigue viva, el fallback está haciendo su trabajo.

Salida solo estática

DeployPages sirve archivos estáticos. API routes, middleware de servidor y comportamiento SSR necesitan un back-end o runtime aparte.

Vista previa local

Usa un servidor local real para revisar el build de producción. Abrir `dist/index.html` con `file://` puede ocultar o crear problemas distintos.

Flujo para publicar Vue

01

Genera archivos estáticos

Ejecuta el build de producción en Vite, Vue CLI o Nuxt estático para emitir archivos que el navegador pueda cargar directamente.

02

Ubica la carpeta de salida

La mayoría de proyectos Vue y Vite salen a `dist`. En Nuxt estático suele ser `.output/public` o un `dist` generado, según configuración.

Los builds estáticos de Nuxt suelen subir `.output/public` o `dist`, según la configuración del proyecto.

03

Sube y valida enlaces

Sube toda la carpeta de salida y verifica enlaces profundos, navegación del router y rutas de archivos estáticos en el sitio publicado.

Problemas comunes al publicar Vue

Fix 01

Refrescar una ruta anidada devuelve 404

Vue Router usa history mode, pero la plataforma busca un archivo real. Usa fallback SPA para que rutas de documento desconocidas sirvan `index.html`.

Fix 02

Archivos CSS o JS devuelven 404

Revisa `base` en Vite o `publicPath` en Vue CLI. También confirma que subiste todo `dist`, incluida la carpeta de archivos generados.

Fix 03

La app funciona con hash mode pero no con history mode

Hash mode mantiene la ruta después de `#` en el navegador. History mode usa URLs limpias y requiere fallback de la plataforma para visitas directas.

Fix 04

La salida de Nuxt no tiene comportamiento de servidor

La salida estática de Nuxt se puede alojar como archivos. Rutas de servidor, middleware y SSR necesitan runtime de servidor.

Preguntas frecuentes sobre publicar Vue

¿Por qué mis CSS y JS devuelven 404?

Normalmente los archivos se construyeron para otra base URL o no se subió la carpeta completa. En Vite revisa `base`; en Vue CLI revisa `publicPath`.

¿Esto sirve para Nuxt?

Sí para salida estática. Genera el sitio primero y sube la carpeta pública generada. DeployPages no es el destino adecuado para Nuxt SSR o rutas API de servidor.

¿Uso hash mode o history mode?

Usa history mode si quieres URLs limpias y la plataforma soporta fallback a `index.html`. Hash mode es más simple, pero deja `#` en cada ruta.

¿Debo subir el proyecto fuente de Vue?

No. Sube la carpeta de producción, normalmente `dist`. El proyecto fuente contiene archivos de desarrollo y dependencias que no deben servirse directamente.

¿El estado de Pinia o Vuex sobrevive a un refresh?

No automáticamente. Un refresh reinicia el estado en memoria. Persiste lo importante con localStorage o el plugin de persistencia que uses.

¿Puedo volver a una versión anterior?

Sí. DeployPages conserva historial de publicaciones para restaurar un build estático anterior cuando sea necesario.