Déploiement du projet

Après le peaufinage des chapitres précédents, le projet TaskHub que nous avons créé possède des fonctionnalités très complètes. Nous allons maintenant passer à la dernière étape :Le pousser depuis l'environnement de développement local vers un serveur de production.。

Dans une implémentation d'entreprise, nous devons garantir que le code peut basculer automatiquement de configuration selon les différents environnements (test, production) et se charger extrêmement rapidement.

Gestion des variables d'environnement : une base de code, plusieurs environnements

Dans le développement réel, l'adresse de l'API ou certaines configurations diffèrent entre l'environnement de développement et celui de production.

Vite prend en charge par défaut.envfichier.

Créez deux fichiers dans le répertoire racine du projet :

.env.development(développement local)

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

.env.production(production)

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

Remarque :

  • Vite exige que les variables commencent parVITE_pour être exposées au code côté client.
  • Dans le code, utilisezimport.meta.env.VITE_API_BASE_URLpour accéder.

Optimisation du build : vitesse de chargement ultime

Lorsque le projet introduit des bibliothèques telles que Vue Router, Pinia, etc., le bundle généréindex.jsdeviendra très volumineux. Nous devons optimiser via le "code splitting" et la "compression".

Stratégie de découpage des chunks (Manual Chunks)

Modifiervite.config.js, regroupez les bibliothèques tierces dans des fichiers JS séparés afin de tirer parti du cache du navigateur.

Exemple

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Regrouper les bibliothèques liées à Vue
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // Autres bibliothèques tierces (comme axios ou echarts introduites plus tard)
          // 'utils-vendor': ['axios'],
        }
      }
    }
  }
})

Configuration de la compression Gzip

Installer le plugin :npm install -D vite-plugin-compression

Exemple

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 10240, // Ne compresser que les fichiers de plus de 10kb
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

Déploiement automatisé (CI/CD)

Nous utiliserons le plus populaireGitHub Actionscomme exemple. Lorsque vous poussez du code vers GitHub, il construira et déploiera automatiquement vers GitHub Pages ou votre serveur.

Créer un script de workflow

Créer dans le répertoire racine du projet.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 # 部署到这个分支

Implémentation de la conteneurisation Docker (Avancé)

Si votre entreprise utilise le cloud de conteneurs, vous avez besoin d'unDockerfile. Il garantit que votre TaskHub s'exécute dans exactement le même environnement sur n'importe quel serveur.

Créez dans le répertoire racineDockerfile：

# 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;"]

Résumé complet de la feuille de route du projet TaskHub

À ce stade, vous avez réalisé, à partir de zéro, un projet pratique de niveau entreprise basé surVue 3 (JavaScript) + Tailwind v4:

  1. Couche architecture：Vite + Tailwind v4 + Vue Router + Pinia.
  2. Couche logique: Composition API + réutilisation de Composables personnalisés.
  3. Couche performance: shallowRef + v-memo + découpage de bundle.
  4. Couche ingénierie: Variables d'environnement + déploiement automatisé CI/CD.

La structure complète du répertoire du projet:

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

Commandes associées :

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产打包
npm run build
Autres extensions