monorepo + vue 加载本地依赖 pnpm

使用pnpm进行本地依赖包的加载。不需要发布私有npm。从B站看了一个视频，记录一下笔记。

代码目录结构如下

代码目录

1 生成`package.josn`

执行 pnpm init 命令生成package.json。即目录中的package.json

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

2 复制yaml文件

在pnpm官网 https://pnpm.io/zh/pnpm-workspace_yaml 复制配置文件内容到根目录下新建的 pnpm-workspace.yaml 文件。
pnpm-workspace.ymal的内容。同时也是目录说明。

packages:
  # 指定根目录直接子目录中的包
  # - 'my-app'
  # packages/ 直接子目录中的所有包
  - 'packages/*'
  # components/ 子目录中的所有包，公共的，给所有组件使用的公开组件
  - 'components/**'
  # 公共方法 api axios 测试使用
  - 'api/**'

3 在api目录下初始化工程

作为一个本地封装的接口库依赖
执行 cd api

pnpm init
pnpm add axios

api目录

api/package.josn
修改name，修改版本号，方便在项目中加载。增加 "private": true

{
  "name": "@qt/api",
  "version": "1.0.1",
  "main": "index.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.15.0",
  "dependencies": {
    "axios": "^1.11.0"
  }
}

在base.js中新建一个axios实例

import axios from "axios";

let Axios = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

export default Axios;

新建一个user.js接口

import Axios from "./base";


export const getUsers = (data) => {
  console.log("getUsers", data);
  return Axios.get(data);
}

只作为测试使用，在index.js中抛出

export * from './user';

4 在components中放本地组件库

为方便，只放了一个button组件。

组件库目录

button放了一个空组件，用来演示引入效果。

button.vue

<script setup>
</script>

<template>
  <button class="btn">公共组件按钮</button>
</template>

index.js中导出这个组件

import Button from "./dir/Button.vue";


export { Button };

在components 中使用pnpm init生成package.json，修改name、版本号，增加"private": true

{
  "name": "@qt/components",
  "private": true,
  "version": "0.0.1",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.18"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.1.2"
  }
}

5 生成vue项目，并引入两个依赖库

在packages中使用npm create vite生成一个vue项目。

vue项目目录

在项目web中，引入api中创建的user.js模块 pnpm add @qt/api
如果pnpm add @qt/api一直报错 ERR_PNPM_FETCH_404 GET https://registry.npmmirror.com/@qt/api: Not Found - 404
则在根目录下创建 .npmrc 文件,并写入 link-workspace-packages=true，即可解决。

link-workspace-packages=true

继续引入components组件库

 pnpm add @qt/components

最终生成的vue项目的package.json如下

{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@qt/api": "workspace:^1.0.1",
    "@qt/components": "workspace:^0.0.1",
    "vue": "^3.5.18"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.1.2"
  }
}

在packages/web目录下执行 pnpm dev
在App.vue中引入两个本地依赖

<script setup>
import { getUsers } from '@qt/api';
import { Button } from '@qt/components';

console.log(getUsers);

getUsers('/users').then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});
</script>

<template>
  <div>
    <Button>Hello</Button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

打开本地浏览器，使用dev打开链接，可以看到引入成功：

展示效果

执行npm run build可以打包出dist文件

dist

如果打包过程中有依赖报错，需要查看是否为依赖库中没有执行pnpm i加载对应的依赖。