Monorepo 项目在 Vercel 上部署时，如何只构建受影响的项目

问题提出

对于大型 Monorepo 项目，尤其是包含多个独立 Web 应用的代码库，在 Vercel 平台上部署时往往面临一个常见问题：即使只修改了其中一个小项目的代码，Vercel 默认配置也会触发所有项目的重新构建和部署。这不仅浪费了宝贵的构建资源，还显著延长了部署时间，影响开发效率。

utities.online 项目案例

项目目录结构

以下是一个典型的 Monorepo 项目结构，采用 pnpm 工作区管理多个 Web 应用，这些应用都部署在 utities.online 域名体系下：

├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── packages/
    ├── altitude/          ← 海拔测量工具
    ├── auto-trim-image/   ← 图片自动裁剪工具
    ├── image-compare-pro/ ← 图像对比工具
    ├── logo-dash/         ← Logo 生成工具
    ├── shared-ui/         ← 共享 UI 组件库
    └── video-splitter/    ← 视频分割工具

该项目使用 pnpm 工作区管理多个独立的 Web 应用，这些应用分别部署在 utities.online 域名下的不同子域名上，同时官网部署在 www.utities.online 。

共享 UI 组件依赖关系

在这个 Monorepo 结构中，各 Web 应用通过 pnpm workspace 协议引用共享的 UI 组件库：

json
// 子项目 package.json 中的依赖示例
{
  "dependencies": {
    "shared-ui": "workspace:*"
  }
}

每个子项目都有自己的 vercel.json 配置文件，用于定义在 Vercel 上的构建和部署行为。这些配置文件内容基本一致：

json
{
  "buildCommand": "pnpm generate",
  "outputDirectory": "dist/static",
  "installCommand": "pnpm install",
  "framework": "vite"
}

解决方案

启用 Vercel 智能部署跳过功能

Vercel 提供了一个强大的功能，可以在没有相关代码变更时跳过构建，这对 utities.online 这样的多子域名部署项目尤为重要。以下是设置步骤：

1. 登录 Vercel 控制台，进入项目设置页面
2. 导航至 "Git" 或 "Deployments" 选项卡
3. 找到并启用 "Skip deployments when there are no changes to the root directory or its dependencies" 选项
4. 保存更改

这个功能会让 Vercel 智能分析代码变更，如果只有一个子项目发生变更，只会重新构建和部署该子项目，而不是整个 Monorepo 中的所有应用。对于 utities.online 的多子域名部署架构来说，这意味着当某个子域名对应的应用更新时，其他子域名应用不会被不必要地重新部署。

解决效果

启用智能部署跳过功能后，utities.online 项目在 Vercel 上的部署行为将得到显著优化：

• 当修改单个子项目时，只有该子项目会被重新构建和部署到对应的子域名
• 当修改共享 UI 组件库时，所有依赖它的子项目都会被重新构建和部署到各自的子域名
• 构建资源得到有效利用，部署时间大幅缩短
• 开发效率显著提升，团队可以更快地迭代和发布功能到 utities.online 平台

通过这一简单但有效的配置变更，像 utities.online 这样的大型 Monorepo 项目可以在 Vercel 平台上实现更加高效和优化的部署流程，确保各子域名应用能够独立、高效地更新。