Развертывание проекта

После доработки в предыдущих главах созданный нами проект TaskHub имеет очень полный функционал. Теперь мы сделаем последний шаг:отправим его из локальной среды разработки на продакшен-сервер.。

В корпоративной реализации нам нужно обеспечить, чтобы код мог автоматически переключать конфигурацию в разных средах (тестирование, продакшен) и загружаться чрезвычайно быстро.

Управление переменными окружения: одна кодовая база, несколько сред

В реальной разработке адрес API или некоторые настройки отличаются между средами разработки и продакшена.

Vite поддерживает по умолчанию.envфайл.

Создайте два файла в корневом каталоге проекта:

.env.development(локальная разработка)

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

.env.production(продакшен)

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

Примечание:

  • Vite требует, чтобы переменные начинались сVITE_чтобы они были доступны клиентскому коду.
  • В коде используйтеimport.meta.env.VITE_API_BASE_URLдля доступа.

Оптимизация сборки: максимальная скорость загрузки

Когда проект подключает такие библиотеки, как Vue Router, Pinia, и т. д., итоговая сборкаindex.jsстанет очень большой. Нам нужно оптимизировать с помощью «разделения кода» и «сжатия».

Стратегия разделения чанков (Manual Chunks)

Изменитьvite.config.js, упаковывайте сторонние библиотеки в отдельные JS-файлы, чтобы использовать кэширование браузера.

Пример

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Объединить библиотеки, связанные с Vue, вместе
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // Другие сторонние библиотеки (такие как axios или echarts, добавленные позже)
          // 'utils-vendor': ['axios'],
        }
      }
    }
  }
})

Настройка сжатия Gzip

Установить плагин:npm install -D vite-plugin-compression

Пример

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 10240, // Сжимать только файлы размером больше 10kb
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

Автоматизированное развёртывание (CI/CD)

Мы будем использовать самый популярныйGitHub Actionsв качестве примера. Когда вы отправляете код в GitHub, он автоматически соберёт и развернёт его на GitHub Pages или на вашем сервере.

Создание скрипта рабочего процесса

Создайте в корневом каталоге проекта.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 # 部署到这个分支

Реализация контейнеризации Docker (продвинутый уровень)

Если ваша компания использует контейнерное облако, вам нуженDockerfile. Он гарантирует, что ваш TaskHub работает в абсолютно одинаковой среде на любом сервере.

Создайте в корневой директорииDockerfile：

# 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

На этом этапе вы завершили практический проект корпоративного уровня, созданный с нуля на основеVue 3 (JavaScript) + Tailwind v4:

  1. Архитектурный слой：Vite + Tailwind v4 + Vue Router + Pinia.
  2. Логический слой: Composition API + повторное использование пользовательских Composables.
  3. Слой производительности: shallowRef + v-memo + разбиение бандла на чанки.
  4. Инженерный слой: Переменные окружения + автоматизированное развёртывание CI/CD.

Полная структура каталогов проекта:

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

Связанные команды:

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产打包
npm run build
Другие расширения