已有项目，接入pnpm + turbo

初始化工作空间（项目）

创建一个文件夹（根目录）：vue3-pnpm-turbo，可随意起名

初始化创建package.json

在根目录中执行： pnpm init

配置工作空间

根目录手动创建：pnpm-workspace.yaml文件，配置如下：

js 复制代码

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

根目录创建packages和apps文件夹

packages用于存放公共库
apps用于存放各个子应用

往`apps`添加已有的子应用

注意：这一步需要结合项目取进行配置

这里提供一个大佬的开源项目：https://github.com/pure-admin/pure-admin-thin/tree/i18n，可自行拉取到apps中，也可以创建pnpm create vite app-first --template vue简单创建，假设添加两个项目web-1和web-2

如果你的项目使用依赖都相同，例如你这里拉取了两份开源项目，那么package.json应该相同，则可以抽取到根目录 的package.json

此时你的web-1和web-2项目的package.json应该剩下：

js 复制代码

{
    "name": "web-1",
    "version": "1.0.0",
    "private": true,
    "dependencies": {},
    "devDependencies": {},
    "engines": {
        "node": "^20.19.0 || >=22.13.0",
        "pnpm": ">=9"
    }
}

为什么web-1和web-2项目的package.json要保留dependencies devDependencies engines等配置？这里因为开源项目vite.config.ts中配置了define：

js 复制代码

define: {
    __INTLIFY_PROD_DEVTOOLS__: false,
    __APP_INFO__: JSON.stringify(__APP_INFO__)
}

而__APP_INFO__的配置如下：

js 复制代码

const __APP_INFO__ = {
    pkg: { name, version, engines, dependencies, devDependencies },
    lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
};

就是大佬将项目的 构建信息对象（如版本号、依赖列表、构建时间等）序列化为 JSON 字符串并注入全局，所以这里保留一下。

根目录安装依赖并执行

根目录 pnpm install

根目录 package.json添加配置：

js 复制代码

"scripts": {
    "dev:web-1": "vite apps/web-1",
    "dev:web-2": "vite apps/web-2"
},

出现问题，则结合项目配置：

这时候可能提示缺少vue-demi依赖，根目录执行pnpm install -D vue-demi
这时候应该能正常启动项目了，但是打开web-1文件一看，import前面一条红红的波浪线 ，这是因为eslint问题，找到eslint.config.js,配置parserOptions中添加tsconfigRootDir: __dirname
这时候你可能去修改一下项目web-1的端口，找到.env.development修改VITE_PORT，发现没有生效！！！
这是因为在根目录执行pnpm run dev:web-1时，工作空间目录在根目录，而web-1运行也在根目录，这时候就出现问题了，找到vite.config.ts，root在根目录，需要把他变为当前web-1目录即可

可以看到root从./build/utils中引入，即const root: string = process.cwd(); 修改如下：

js 复制代码

import { fileURLToPath } from "node:url";
import path from 'node:path'

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const root: string = path.dirname(__dirname); // 父级目录

这时候子项目再运行，应该就可以了，如果还有问题，欢迎交流

局部安装依赖项

某个子项目需要某个依赖，但是其他项目没有使用，所以这个时候最好就是单独为这个子项目安装依赖，比如说现在web-1独立使用某个依赖(如element-plus)，两种方式：

可以进入到apps/web-1目录安装pnpm install element-plus --save-dev
可以在根目录pnpm install element-plus --save-dev --filter web-1

配置公共库

在packages中创建utils文件夹，结构如下：

js 复制代码

packages
--utils
----index.ts
----package.json   // 在utils目录 pnpm init即可 ，其中name随意起

如index.ts添加：export const name:string = 'vvmily'

根目录package.json中配置：

js 复制代码

"workspaces": [
    "packages/*"
 ],

在web-1项目中package.json配置：

js 复制代码

"dependencies": {
    "vv-utils": "workspace:*"
},

在根目录，pnpm run dev:web-1，在web-1中测试是否成功拿到

js 复制代码

import { name } from 'vv-utils'

应该能成功输出nane了,在utils/index.ts修改保存自动更新了，成功了！！！

已有项目，接入pnpm + turbo

初始化工作空间（项目）

初始化创建package.json

配置工作空间

往apps添加已有的子应用

根目录安装依赖并执行

局部安装依赖项

配置公共库

往`apps`添加已有的子应用