Vue 3 工程化：用 pnpm workspace 与 Vite 库模式搭一个 Monorepo 组件库

为什么组件库要上 Monorepo

当项目多了，按钮、表单、弹窗在三个仓库里各写一份，迟早会分叉。Monorepo 把组件、工具函数、文档站收进一个仓库，靠 pnpm 的硬链接共享依赖，既能单包发布到 npm，又能本地互相引用，省去发版等待。

用 pnpm workspace 串起多包

根目录放一个 pnpm-workspace.yaml，声明哪些目录是子包。

packages:
  - "packages/*"

组件包 package.json 用 Vite 的库模式构建，输出 ESM 与类型声明。

{
  "name": "@my/ui",
  "version": "0.1.0",
  "type": "module",
  "main": "./dist/ui.js",
  "module": "./dist/ui.js",
  "types": "./dist/index.d.ts",
  "exports": { ".": { "import": "./dist/ui.js" } },
  "scripts": {
    "build": "vite build",
    "typecheck": "vue-tsc --noEmit"
  }
}

Vite 库模式配置

用 vite-plugin-dts 生成类型，external 掉 vue 和运行时依赖，避免把 vue 打进产物。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [vue(), dts({ rollupTypes: true })],
  build: {
    lib: {
      entry: "src/index.ts",
      formats: ["es"],
      fileName: "ui",
    },
    rollupOptions: {
      external: ["vue"],
      output: { globals: { vue: "Vue" } },
    },
  },
});

在另一个子包里直接引用源码

本地调试时不用发版，直接在 examples 子包的依赖里写 workspace:*。

{
  "dependencies": {
    "@my/ui": "workspace:*"
  }
}

根目录一条命令装全量依赖：

pnpm install
pnpm -r --filter @my/ui build

这样组件改动在 examples 里即时可见，验证通过后再发布。Monorepo 让"一个组件、处处复用"真正落地，而不是停在口号。