Project Deployment

After polishing in the previous chapters, the TaskHub project we created has very complete functionality. Now we are going to take the final step:Push it from the local development environment to a production server.。

In enterprise-level implementation, we need to ensure that the code can automatically switch configuration in different environments (testing, production) and load extremely fast.

Environment Variable Management: One Codebase, Multiple Environments

In real development, the API address or some configuration differs between development and production environments.

Vite supports by default.envfile.

Create two files in the project root directory:

.env.development(local development)

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

Note:

  • Vite requires variables to start withVITE_to be exposed to client-side code.
  • In the code, useimport.meta.env.VITE_API_BASE_URLto access.

Build Optimization: Ultimate Loading Speed

When the project introduces libraries such as Vue Router, Pinia, etc., the builtindex.jswill become very large. We need to optimize through "code splitting" and "compression".

Chunk Splitting Strategy (Manual Chunks)

Modifyvite.config.js, package third-party libraries into separate JS files to leverage browser caching.

Example

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Bundle vue-related libraries together
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // Other third-party libraries (such as axios or echarts introduced later)
          // 'utils-vendor': ['axios'],
        }
      }
    }
  }
})

Gzip Compression Configuration

Install plugin:npm install -D vite-plugin-compression

Example

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 10240, // Only compress files larger than 10kb
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

Automated Deployment (CI/CD)

We'll use the most popularGitHub Actionsas an example. When you push code to GitHub, it will automatically build and deploy to GitHub Pages or your server.

Create a Workflow Script

Create in the project root directory.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 Containerization Implementation (Advanced)

If your company uses container cloud, you need aDockerfile. It ensures that your TaskHub runs in exactly the same environment on any server.

Create in the root directoryDockerfile：

# 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 Project Full Roadmap Summary

At this point, you have completed a from-scratch, based onVue 3 (JavaScript) + Tailwind v4enterprise-level hands-on project:

  1. Architecture layer：Vite + Tailwind v4 + Vue Router + Pinia。
  2. Logic layer: Composition API + custom Composables reuse.
  3. Performance layer: shallowRef + v-memo + bundle chunking.
  4. Engineering layer: Environment variables + CI/CD automated deployment.

The entire project directory structure:

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

Related commands:

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产打包
npm run build
Other extensions