Vue-router 在组件库中使用时返回未定义

Question

我已经解决这个问题几个星期了，除了 stackoverflow 上的一些死胡同和 vue-router 自己的 github 问题之外，我似乎在任何地方都找不到任何信息。

我正在尝试在基于 vite 的组件库中为我的 vue-router 开发一个 init 函数，然后使用 npm 链接在客户端应用程序中使用它进行本地开发，即使使用该库的已发布版本，问题仍然存在。启动路由器的方法本身工作得很好，返回要在消费应用程序中使用的路由器，当我尝试在客户端应用程序的组件之一内调用 useRoute 或 useRouter 并收到未定义的消息时，就会出现问题。

我还在控制台上收到“未找到注入“符号（路由器）”警告。 （这让我最初怀疑实例重复）

Vite 配置汇总选项

rollupOptions: {
        external: ["vue", "vue-router"],
      },

有问题的函数

import "vue-router";
import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";

declare module "vue-router" {
  interface RouteMeta {
    step: number;
    displayStep: number;
    displayTotalSteps: number;
    fields: string[];
  }

  interface Router {
    replaceRoutes: (newRoutesName: string) => void;
    nextStep: () => void;
    previousStep: () => void;
    skipStep: (skipNr: number) => void;
  }
}

export const createRouterInstance = (options: {
  sessionRoutesToken: string;
  routeGetter: (routes: string | null) => RouteRecordRaw[];
}) => {
  const router = createRouter({
    history: createWebHashHistory(),
    routes: options.routeGetter(
      window.sessionStorage.getItem(options.sessionRoutesToken)
    ),
    scrollBehavior: () => ({ top: 0 }),
  });

  router.beforeEach((to, from) => {
    to.meta.animation =
      from.meta?.step < to.meta?.step ? "slide-right" : "slide-left";
  });

  router.replaceRoutes = ...

  router.nextStep = ...

  router.previousStep = ...

  router.skipStep = ...

  return router;
};

我怀疑实例被欺骗，并将我的组件库的实例配置为外部实例，但无济于事。

Answer 1

读到你问题的最后一行，我心中灵光一闪：

I've suspected duped instances and configured my component library's instance as external to no avail.

就我而言，我解决了在项目的

configureWebpack

中添加

vue.config.js

选项的问题，该项目使用有问题的库，该库也在内部使用

vue-router

。

const { defineConfig } = require("@vue/cli-service");
const path = require('path');

module.exports = defineConfig({
  transpileDependencies: true,
  filenameHashing: false,
  configureWebpack: {
    resolve: {
      symlinks: false,
      alias: {
        vue: path.resolve('./node_modules/vue'),
        'vue-router': path.resolve('./node_modules/vue-router') // <--- here
      }
    }
  }
});