前段时间有一个需求 多个小系统需要放在同一个文件夹 并且他们之间的组件目录是通用的 这时候 monorepo 就派上了很大用场了

1. 创建 pnpm-workspace.yaml 文件内容如下：

packages:
  - 'packages/*'
  - 'apps/*'

2. 初始化项目
   pnpm init

3. 创建apps文件夹并且在apps里面使用vite创建两个子项目 project-1 、project-2

把 project 里面其中一个 package.json 剪切这两项 dependencies 、devDependencies 到根目录的 package.json

注意把 dependencies 与 devDependencies 复制出来后字目录的 package.json 里面的这两项就可以删除掉了

然后如果想在跟项目里面启动就可以加上下面几个 scripts

下面是目录接口仅供参考

4. 安装依赖
   pnpm install

5. 启动项目
   pnpm run dev:project-1
   这里的project-1 就是对应的scripts部分的 dev:project-1 启动多个项目也是同理的
   

6. 创建公共函数等文件夹
   创建 packages 文件夹 里面再创建 shared 文件夹 文件夹里面创建 package.json

   {
     "name": "@pnpm-sub-monorepo/shared",
     "version": "1.0.0",
     "description": "",
     "main": "./src/index.ts",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "packageManager": "pnpm@10.12.4"
   }
   

   这时候shared 里面创建src文件夹里面添加 index.ts
   创建一个简单的并导出
   

7. 导入函数组件
   这时候需要在的 project-1 、 project-2 项目里面的pacakge.json 里面做一些小修改把刚刚删除的 dependencies 添加回来
   

   "dependencies": {
       "@pnpm-sub-monorepo/shared": "workspace:*"
    }

   workspace:* 就表示当前工作目录
   ⚠️ 改完之后需要重新执行 pnpm install
   接下来让我们验证下使用
   分别在App.vue 引用并使用它
   
   project-1
   
   project-2
   

github: https://github.com/xl495/pnpm-sub-apps-monorepo.git