编写NPM包时vue-router类型不兼容问题的解决方案咨询

下面是几个实用的解决思路，按需选择：

1. 把vue-router声明为peer依赖（最推荐） #

在你的包的package.json里，把vue-router移到peerDependencies字段，同时指定兼容的版本范围，比如支持v3和v4的话：

{
  "peerDependencies": {
    "vue-router": "^3.0.0 || ^4.0.0"
  },
  "devDependencies": {
    "vue-router": "^4.0.0" // 开发时安装一个版本用于本地测试
  }
}

这样你的包不会自带vue-router的依赖和类型，而是直接复用项目中已安装的版本，从根源上避免版本冲突。记得在包的README里说明需要项目提前安装对应版本的vue-router。

2. 用TypeScript条件类型兼容多版本 #

如果你的包需要同时适配vue-router不同大版本（比如v3和v4），可以用条件类型做类型适配。比如针对两个版本中差异的类型做特征判断：

// 适配RouteLocationNormalized在v3和v4的差异
import type { RouteLocationNormalized } from 'vue-router'

type CompatibleRouteLoc = RouteLocationNormalized extends { meta: Record<string, any> }
  ? RouteLocationNormalized
  : import('vue-router/dist/vue-router.d.ts').RouteLocationNormalized

通过判断类型是否包含某个特征，自动匹配对应版本的类型，让你的包能兼容多个版本的vue-router类型定义。

3. 设为可选依赖并做类型兜底 #

如果vue-router不是你的包的强依赖，只是偶尔用到其类型，可以把它设为optionalDependencies，然后在类型定义里添加兜底逻辑：

// 包的类型声明文件中
declare module 'my-package' {
  // 尝试导入vue-router类型，失败则用自定义兜底类型
  type VueRouterRoute = typeof import('vue-router') extends { RouteLocationNormalized: infer T }
    ? T
    : { path: string; name?: string; meta?: Record<string, any> }

  export type MyCustomRoute = VueRouterRoute
}

这样即使项目中没有安装vue-router，或者版本不兼容，类型系统也不会抛出错误，有一个兜底的类型可以正常使用。

4. 发布多版本分支适配不同vue-router #

如果vue-router不同大版本的差异实在太大，没法通过代码兼容，可以考虑针对不同版本的vue-router发布对应的包版本：

• 创建vue-router-v3分支，专门适配vue-router v3，发布时打tag vue-router-v3，用户可以通过pnpm install my-package@vue-router-v3安装
• 主分支适配vue-router v4，保持默认版本

这种方式适合差异极大、无法通过代码兼容的场景，但会增加后续的维护成本。

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