创建Monorepo多项目管理

从零到一搭建 PNPM Monorepo 项目（Vue + NestJS）

本文教你快速搭建标准企业级 Monorepo ，一条命令启动前后端，依赖统一管理，Windows/Mac 通用。

参考文档：https://juejin.cn/post/7454035377106599963

一、项目最终结构

复制代码

project-monorepo/
├── package.json
├── pnpm-workspace.yaml
├── node_modules/
└── packages/
    ├── web/       # Vue 前端
    └── server/    # Nest 后端

二、完整搭建步骤

1. 创建根目录并初始化

bash 复制代码

mkdir project-monorepo
cd project-monorepo
pnpm init

2. 配置 Monorepo 工作区

新建 pnpm-workspace.yaml

yaml 复制代码

packages:
  - "packages/*"

3. 创建项目目录

bash 复制代码

mkdir packages

4. 创建 Vue 项目

bash 复制代码

pnpm create vite packages/web --template vue

5. 创建 NestJS 项目

bash 复制代码

cd packages
nest new server --no-git --package-manager pnpm
cd ..

6. 清理子项目依赖（必须执行）

bash 复制代码

rd /s /q packages\web\node_modules
rd /s /q packages\server\node_modules
del packages\web\pnpm-lock.yaml
del packages\server\pnpm-lock.yaml

7. 根目录统一安装依赖

bash 复制代码

pnpm install

8. 安装并发启动工具

bash 复制代码

pnpm add concurrently -D

三、脚本配置

根目录 package.json

json 复制代码

{
  "name": "monorepo-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "concurrently \"pnpm dev:web\" \"pnpm dev:server\"",
    "dev:web": "pnpm --filter web dev",
    "dev:server": "pnpm --filter server start:dev",
    "build": "pnpm build:web && pnpm build:server",
    "build:web": "pnpm --filter web build",
    "build:server": "pnpm --filter server build"
  }
}

Nest 关闭清屏（packages/server/package.json）

json 复制代码

"start:dev": "nest start --watch --preserveWatchOutput"

四、常用命令

bash 复制代码

pnpm i          # 安装所有依赖
pnpm dev        # 同时启动前后端
pnpm build      # 同时打包前后端

五、核心要点

子项目安装依赖 ：进入对应目录执行 pnpm add xxx
根目录只放工具依赖 ：pnpm add xxx -D
--filter：指定子项目执行命令
concurrently：跨平台多命令并行
--preserveWatchOutput：关闭 Nest 清屏