在组件库中使用Vue-router时返回undefined的问题求助

核心问题 #

基于Vite开发的组件库中提供createRouterInstance函数，客户端应用调用该函数获取router实例后，使用useRoute/useRouter返回undefined，控制台提示injection "Symbol(router)" not found，已将vue、vue-router设为external但问题仍存在。

可能原因与对应解决方案 #

1. 依赖实例不一致（最可能） #

虽然配置了external，但本地npm link或发布后，组件库与客户端应用可能加载了不同版本/实例的vue或vue-router，导致Vue注入系统无法识别组件库创建的router实例（Symbol(router)为每个vue-router实例独有）。

解决步骤：

• 本地开发时，在组件库目录执行：

  # 强制组件库使用客户端应用的vue依赖
  npm link ../客户端应用目录/node_modules/vue
  # 强制组件库使用客户端应用的vue-router依赖
  npm link ../客户端应用目录/node_modules/vue-router
  

• 发布组件库时，将vue和vue-router声明为peerDependencies：

  {
    "peerDependencies": {
      "vue": "^3.0.0",
      "vue-router": "^4.0.0"
    }
  }
  

  确保客户端使用自身已安装的依赖版本，避免重复打包。

2. 客户端未正确挂载router到Vue应用实例 #

确认客户端应用中，获取router实例后已通过app.use(router)挂载：

import { createApp } from 'vue'
import { createRouterInstance } from '你的组件库'
import App from './App.vue'

const router = createRouterInstance({
  sessionRoutesToken: 'xxx',
  routeGetter: (routes) => { /* 你的路由配置逻辑 */ }
})

const app = createApp(App)
app.use(router) // 必须执行此步骤
app.mount('#app')

3. 完善Vite打包配置 #

确保Vite的build配置完整，保证external生效：

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: '你的组件库名称',
      fileName: (format) => `你的组件库名称.${format}.js`
    },
    rollupOptions: {
      external: ['vue', 'vue-router'],
      output: {
        // 为UMD格式提供外部依赖全局变量
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
})

4. 统一类型扩展配置 #

组件库中对vue-router的类型扩展，需确保客户端能识别。将类型扩展代码放在单独的d.ts文件，并在package.json中配置：

{
  "types": "dist/index.d.ts"
}

（注：此仅影响类型提示，不影响运行时，但可避免潜在类型问题）

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