Projektbereitstellung

Nach der Feinarbeit in den vorherigen Kapiteln hat das von uns erstellte TaskHub-Projekt einen sehr vollständigen Funktionsumfang. Jetzt gehen wir den letzten Schritt:Pushe es aus der lokalen Entwicklungsumgebung auf einen Produktionsserver.。

In der unternehmensweiten Umsetzung müssen wir sicherstellen, dass der Code in verschiedenen Umgebungen (Test, Produktion) automatisch die Konfiguration wechseln kann und extrem schnell lädt.

Umgebungsvariablen-Verwaltung: Eine Codebasis, mehrere Umgebungen

In der realen Entwicklung unterscheidet sich die API-Adresse oder eine gewisse Konfiguration zwischen Entwicklungs- und Produktionsumgebung.

Vite unterstützt standardmäßig.envDatei.

Erstelle zwei Dateien im Projektstammverzeichnis:

.env.development(lokale Entwicklung)

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

.env.production(Produktion)

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

Hinweis:

  • Vite erfordert, dass Variablen beginnen mitVITE_um für clientseitigen Code verfügbar zu sein.
  • Verwenden Sie im Codeimport.meta.env.VITE_API_BASE_URLfür den Zugriff.

Build-Optimierung: Maximale Ladegeschwindigkeit

Wenn das Projekt Bibliotheken wie Vue Router, Pinia usw. einbindet, wird das gebauteindex.jssehr groß werden. Wir müssen durch "Code-Splitting" und "Komprimierung" optimieren.

Chunk-Splitting-Strategie (Manuelle Chunks)

Ändernvite.config.js, packen Sie Bibliotheken von Drittanbietern in separate JS-Dateien, um das Browser-Caching zu nutzen.

Beispiel

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Vue-bezogene Bibliotheken zusammen bündeln
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // Andere Drittanbieter-Bibliotheken (wie später eingeführte axios oder echarts)
          // 'utils-vendor': ['axios'],
        }
      }
    }
  }
})

Gzip-Komprimierungskonfiguration

Plugin installieren:npm install -D vite-plugin-compression

Beispiel

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 10240, // Nur Dateien größer als 10kb komprimieren
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

Automatisiertes Deployment (CI/CD)

Wir verwenden das beliebtesteGitHub Actionsals Beispiel. Wenn du Code zu GitHub pushst, wird er automatisch gebaut und auf GitHub Pages oder deinem Server bereitgestellt.

Workflow-Skript erstellen

Im Projektstammverzeichnis erstellen.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 # 部署到这个分支

Implementierung der Docker-Containerisierung (Fortgeschritten)

Wenn Ihr Unternehmen Container-Cloud verwendet, benötigen Sie einDockerfile. Es stellt sicher, dass Ihr TaskHub auf jedem Server in genau derselben Umgebung läuft.

Im Root-Verzeichnis erstellenDockerfile：

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

TaskHub-Projekt – Vollständige Roadmap-Zusammenfassung

An diesem Punkt haben Sie ein von Grund auf neu erstelltes, aufVue 3 (JavaScript) + Tailwind v4basierendes praxisnahes Projekt auf Unternehmensniveau abgeschlossen:

  1. Architekturschicht：Vite + Tailwind v4 + Vue Router + Pinia.
  2. Logikschicht: Composition API + Wiederverwendung benutzerdefinierter Composables.
  3. Performance-Schicht: shallowRef + v-memo + Bundle-Chunking.
  4. Engineering-Schicht: Umgebungsvariablen + CI/CD-automatisierte Bereitstellung.

Die gesamte Projektverzeichnisstruktur:

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

Zugehörige Befehle:

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产打包
npm run build
Weitere Erweiterungen