Despliegue del proyecto

Después del pulido en los capítulos anteriores, el proyecto TaskHub que creamos ya tiene funcionalidades muy completas. Ahora vamos a dar el último paso:Llevarlo desde el entorno de desarrollo local al servidor de producción。

En la implementación a nivel empresarial, debemos asegurarnos de que el código pueda cambiar automáticamente de configuración en diferentes entornos (pruebas, producción) y de que la velocidad de carga sea extremadamente rápida.

Gestión de variables de entorno: un solo código, múltiples entornos

En el desarrollo real, la dirección de la API o algunas configuraciones son diferentes entre el entorno de desarrollo y el entorno en línea.

Vite admite por defecto.envarchivos.

Crea dos archivos en el directorio raíz del proyecto:

.env.development(desarrollo local)

VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_TITLE=TaskHub (Dev)

.env.production(producción en línea)

VITE_API_BASE_URL=https://api.taskhub.com
VITE_APP_TITLE=TaskHub

Explicación:

  • Vite requiere que las variables comiencen conVITE_para que puedan quedar expuestas al código del cliente.
  • En el código, medianteimport.meta.env.VITE_API_BASE_URLse accede.

Optimización del empaquetado: velocidad de carga extrema

Cuando el proyecto introduce librerías como Vue Router, Pinia, etc., el bundle generadoindex.jsserá muy grande. Necesitamos optimizarlo mediante “división en paquetes” y “compresión”.

Estrategia de división en paquetes (Manual Chunks)

Modificavite.config.jspara empaquetar las librerías de terceros en archivos JS independientes, aprovechando la caché del navegador.

Ejemplo

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Agrupar las librerías relacionadas con Vue
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // Otras librerías de terceros (como axios o echarts que se añadan más adelante)
          // 'utils-vendor': ['axios'],
        }
      }
    }
  }
})

Configuración de compresión Gzip

Instala el plugin:npm install -D vite-plugin-compression

Ejemplo

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 10240, // Solo comprimir archivos de más de 10kb
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

Despliegue automatizado (CI/CD)

Tomamos como ejemplo el más popularGitHub Actionspor ejemplo, cuando envías el código a GitHub, automáticamente te ayudará a empaquetarlo y desplegarlo en GitHub Pages o en tu servidor.

Crear script de Workflow

Crea en el directorio raíz del proyecto.github/workflows/deploy.yml：

name: Deploy TaskHub

on:
  push:
    branches: [ main ] # 监听 main 分支的推送

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Install and Build 🔧
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist # 打包产物目录
          branch: gh-pages # 部署到这个分支

Contenerización con Docker en la práctica (Avanzado)

Si tu empresa utiliza una nube de contenedores, necesitas unDockerfileEste archivo garantiza que el entorno de ejecución de tu TaskHub sea exactamente el mismo en cualquier servidor.

Crea en el directorio raízDockerfile：

# 1. 使用 Nginx 镜像作为基础
FROM nginx:alpine

# 2. 将打包后的 dist 目录复制到 Nginx 的静态资源目录
COPY dist/ /usr/share/nginx/html/

# 3. 复制自定义 nginx 配置（解决单页面应用路由 404 问题）
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Resumen completo del proyecto TaskHub

Hasta aquí, has completado un proyecto desde cero, basado enVue 3 (JavaScript) + Tailwind v4proyecto práctico de nivel empresarial:

  1. Capa de arquitectura：Vite + Tailwind v4 + Vue Router + Pinia.
  2. Capa de lógica: Composition API + reutilización de Composables personalizados.
  3. Capa de rendimiento: shallowRef + v-memo + división en paquetes del empaquetado.
  4. Capa de ingeniería: variables de entorno + despliegue automatizado CI/CD.

Estructura de directorios del proyecto completo:

src/
├── assets/          # 静态资源
├── components/      # 高复用原子组件 (Header, Input, Item, Filter)
├── composables/     # 自定义逻辑钩子 (useLocalStorage, useNotification)
├── router/          # 路由配置与权限守卫
├── stores/          # Pinia 状态仓库 (TaskStore)
├── views/           # 页面级组件 (Dashboard, Login)
├── App.vue          # 全局容器与页面过渡动画
└── main.js          # 项目入口

Comandos relacionados:

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产打包
npm run build
Otras extensiones