Empaquetar y publicar — Desplegar en Vercel

En este capítulo aprenderás a empaquetar el proyecto de blog desarrollado localmente y a desplegarlo gratuitamente en Internet, obteniendo un enlace de acceso público.

Compilar el paquete de producción

Al ejecutar en desarrollonpm run dev, Vite inicia un servidor de desarrollo local con soporte de actualización en caliente.

Pero para el despliegue se necesitanarchivos optimizados de pequeño tamaño— esto es la compilación de producción.

$ npm run build

Después de ejecutarlo, se generará en la raíz del proyecto unadist/carpeta:

dist/
├── index.html                # 入口 HTML（资源引用已被替换为构建后的路径）
├── assets/
│   ├── index-Df3aBc9x.js    # 打包后的 JS（代码已压缩、tree-shaking）
│   ├── index-Gh7jKl2m.css   # 打包后的 CSS（已提取、压缩）
│   └── ...                   # 其他资源
├── posts.json                # public 目录的文件原样复制
└── favicon.ico               # 其他静态资源

Ten en cuenta varios cambios clave:

• Los nombres de archivo incluyen un hash (por ejemplo,Df3aBc9x), el hash cambia si el contenido cambia, para el control de caché del navegador.
• El código ha sidocomprimido y se le ha aplicado Tree-shaking(eliminación de código no utilizado)
• JS y CSS se dividen en archivos independientes
• public/El contenido del directorio se copia tal cual a la raíz

Para previsualizar el resultado de la compilación, puedes ejecutarnpx vite preview, que iniciará un servicio local en modo producción para simular el entorno en línea.

Subir el proyecto a GitHub

Las plataformas de despliegue (como Vercel) suelen extraer el código del repositorio Git y compilarlo automáticamente, por lo que primero debes subir el proyecto a GitHub.

Paso 1: Crear un repositorio de GitHub

En la esquina superior derecha de GitHub, haz clic en el signo + → New repository, y completa:

• Repository name：blog-app
• Selecciona Public (para despliegue gratuito)
• No marques "Initialize this repository with a README" (porque ya tienes los archivos del proyecto localmente)

Paso 2: Inicializar Git localmente y hacer push

$ cd blog-app
$ git init
$ git add .
$ git commit -m "初始化博客项目"
$ git branch -M main
$ git remote add origin https://github.com/你的用户名/blog-app.git
$ git push -u origin main

Después de un push exitoso, actualiza la página de GitHub y podrás ver todos los archivos del proyecto.

Antes de hacer push, confirma.gitignoreque el archivo .gitignore ya contenga lo siguiente:node_modulesydist.node_modules no debe subirse (se puede restaurar con npm install), y dist debe ser generado automáticamente por la plataforma de compilación.

Desplegar en Vercel

Verceles la plataforma de despliegue de frontend más popular actualmente, con soporte de configuración cero para proyectos Vue/Vite.

Pasos de despliegue

1. Visitavercel.com, regístrate/inicia sesión con tu cuenta de GitHub.
2. Haz clic en "New Project" → Import Git Repository → selecciona el repositorio blog-app
3. Vercel detectará automáticamente que el proyecto es Vite (Vue), sin necesidad de configuración.
4. Haz clic en "Deploy" y espera decenas de segundos; la compilación estará completa.
5. Después de un despliegue exitoso, obtendrás un enlace, como:https://blog-app.vercel.app

Despliegue automático

A partir de entonces, cada vez que modifiques código localmente y lo subas a GitHub (git push), Vercel automáticamente:

1. detectará nuevos commits en el repositorio
2. extraerá el código más reciente y ejecutará npm install
3. ejecutará npm run build para compilar
4. desplegará en el entorno de producción

Todo el proceso no requiere ninguna operación: con hacer push, se publica.

Dominio personalizado (opcional)

Vercel proporciona.vercel.appun subdominio gratuito, y también puedes vincular tu propio dominio.

1. En el Dashboard del proyecto en Vercel → Settings → Domains
2. Ingresa tu dominio (por ejemplo, blog.example.com)
3. Sigue las indicaciones y añade un registro CNAME en tu proveedor de DNS apuntando acname.vercel-dns.com
4. Espera a que el DNS surta efecto (generalmente de minutos a horas). Vercel solicitará automáticamente un certificado SSL.

Próximos pasos de aprendizaje

Ya has dominado las habilidades principales de Vue3. A continuación tienes rutas de aprendizaje avanzado según diferentes objetivos: