Vue库中useRouter()始终返回undefined的问题求助

我开发了一个简易Vue.js库，核心是自定义函数createMyCustomApp，但在主应用中使用时，库内的App.vue组件通过useRouter()获取到的router始终是undefined，控制台出现警告：

[Vue warn]: injection "Symbol(router)" not found. at

将App.vue直接在主应用本地使用时功能正常，相关代码配置如下：

库核心代码 #

import AppComp from "./components/App.vue";

export const createMyCustomApp = (props): App<Element> => {
    console.log("Creating app with props: ", getNonEmptyProps(props));
    return createApp(AppComp , getNonEmptyProps(props));
}

库内App.vue代码 #

<script setup lang="ts">
import {useRouter} from "vue-router";
import {useFetchingError, useIsFetching} from "../app";
import {ComputedRef, defineComponent, onMounted, PropType} from "vue";
import {computed, getCurrentInstance} from "vue";
import Loading from "./Loading.vue";
import Error from "./Error.vue";

defineProps({
  loadingComponent: {
    type: Object as PropType<ReturnType<typeof defineComponent>>,
    default: Loading
  },
  errorComponent: {
    type: Object as PropType<ReturnType<typeof defineComponent>>,
    default: Error
  }
});

const isFetching: ComputedRef<boolean> = computed(() => useIsFetching());
const fetchingError = computed(() => useFetchingError());

const router = useRouter();

console.log("=".repeat(50));
console.log("router : ", router);
console.log(getCurrentInstance());
console.log("=".repeat(50));

router.afterEach((to, from, failure) => {
  // some code
});


router.afterEach(() => /*some code*/);

onMounted(() => {
  const newRouter = useRouter();
  console.log("After mount" , newRouter);
});
</script>

<template>
  <component v-if="isFetching" :is="loadingComponent"/>
  <component v-if="fetchingError" :is="errorComponent" :error="fetchingError.message"/>
  <router-view v-else></router-view>
</template>

库package.json配置 #

{
  "name": "@myusername/redacted",
  "version": "0.0.2",
  "description": "something....",
  "main": "dist/lib.umd.js",
  "module": "dist/lib.es.js",
  "browser": "dist/lib.cjs.js",
  "types": "dist/app.d.ts",
  "exports": {
    "." : {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.cjs.js"
    }
  },
  "files": [
    "dist"
  ],
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@myusername"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "keywords": [
    "client",
    "metaframework",
    "watchfulraven"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^6.2.0",
    "vite-plugin-dts": "^4.5.0"
  },
  "peerDependencies": {
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "axios": "^1.8.1"
  }
}

库vite.config.ts配置 #

import {defineConfig} from "vite";
import dts from "vite-plugin-dts";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    build: {
        lib: {
            entry: "src/app.ts",
            name: "lib",
            formats: ["es", "cjs", "umd"],
            fileName: (format) => `lib.${format}.js`,
        },
        rollupOptions: {
            external: ['vue', 'vue-router'],
            output: {
                globals: {
                    vue: 'Vue',
                    'vue-router': 'VueRouter',
                },
            },
        },
    },
    plugins: [
        vue(),
        dts({rollupTypes: true})
    ]
});

主应用使用代码 #

import {createMyCustomApp} from "@myusername/thepackagename";
import {router} from "@/presentation/routes/router.js";
import {i18n} from "./i18n.ts";


const app = createMyCustomApp({});

app
    .use(router)
    .use(i18n)
    .mount("#app");

1. 修复库中Vue实例的导入问题 #

这是最核心的问题：你的createMyCustomApp函数中没有显式从vue导入createApp和App类型，导致代码运行时可能使用了独立的Vue实例，和主应用的Vue实例不共享依赖注入容器，router自然无法被注入。

修改库的核心代码：

import { createApp, App } from 'vue'; // 新增这行导入
import AppComp from "./components/App.vue";

export const createMyCustomApp = (props): App<Element> => {
    console.log("Creating app with props: ", getNonEmptyProps(props));
    return createApp(AppComp, getNonEmptyProps(props));
}

2. 确保peerDependencies正确生效 #

• 删除库目录下的node_modules文件夹，重新执行npm install，确保vue和vue-router不会被安装到库的依赖中，而是直接使用主应用的依赖。
• 验证主应用的node_modules中是否存在vue和vue-router，并且版本符合peerDependencies的要求。

3. 增加代码容错性 #

在App.vue中，避免直接使用可能为undefined的router：

const router = useRouter();
// 先判断router是否存在再调用方法
if (router) {
  router.afterEach((to, from, failure) => {
    // some code
  });

  router.afterEach(() => /*some code*/);
}

4. 验证组件挂载时机 #

主应用中必须保证先调用app.use(router)，再调用app.mount("#app")，你的当前调用顺序是正确的，不要调整这个顺序。

完成以上步骤后，重新打包库并在主应用中更新依赖，应该就能正常获取router实例了。

内容的提问来源于stack exchange，提问作者Mohammad Si Abbou