多个VueJS TypeScript项目如何搭建公共共享库避免代码重复？

无需发布npm包，采用本地公共TS库+项目直接关联的方案即可实现需求，全程本地操作，配置复杂度低。

1. 搭建本地公共TS库 #

在两个Vue项目的同级目录创建公共库文件夹，参考目录结构如下：

工作根目录/
├── vue-public-client/  # 公众客户端项目
├── vue-admin-tool/     # 管理后台项目
└── shared-ts/          # 公共TS库存放目录
    ├── src/
    │   ├── models/     # 复用的TS类型/模型定义
    │   ├── services/   # 复用的接口请求/公共逻辑
    │   └── index.ts    # 统一导出入口
    ├── tsconfig.json
    └── package.json

公共库配置文件示例 #

• shared-ts/package.json配置：

{
  "name": "@your-custom/shared",
  "version": "0.0.1",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.9.0"
  }
}

• shared-ts/tsconfig.json配置（和你的Vue项目TS配置对齐即可）：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

将原项目中需要复用的models、services迁移到公共库对应目录，在index.ts中统一导出后，在公共库目录执行npm run build完成首次编译。

2. 关联公共库到Vue项目 #

两种关联方式可选：

• 本地路径依赖（稳定性更高，无需额外操作）
  在两个Vue项目的package.json的dependencies字段中添加如下配置：

"@your-custom/shared": "file:../shared-ts"

之后在两个项目目录分别执行npm install，npm会自动将公共库软链到项目的node_modules目录。

• npm link（适合公共库频繁修改的场景）
  先在公共库目录执行npm link，之后分别在两个Vue项目目录执行npm link @your-custom/shared即可完成关联。

3. 适配Vue CLI编译配置 #

Vue CLI默认不会转译node_modules中的依赖，需要修改两个项目的vue.config.js，将公共库加入转译名单：

module.exports = {
  transpileDependencies: ['@your-custom/shared']
}

如需配置别名简化引入，可在项目的tsconfig.json中添加paths配置：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"],
      "@shared/*": ["../shared-ts/src/*"]
    }
  }
}

使用方式 #

配置完成后可直接在两个项目中引入公共内容：

// 方式1：从包名引入
import { UserModel, fetchUserList } from '@your-custom/shared'
// 方式2：通过别名直接引入源文件（无需每次修改公共库后重新编译）
import { UserModel } from '@shared/models/user'

维护规则 #

每次修改公共库代码后，在公共库目录执行一次npm run build，两个项目即可自动获取最新代码，无需重复执行安装/关联操作。

内容的提问来源于stack exchange，提问作者Chris Lees