Vue3项目引入公共模块后出现vue-router.mjs冲突：如何解决useRouter()返回undefined的问题？

Vue3项目：公共模块引入导致vue-router冲突及useRouter()返回undefined的解决方案

本文分析并解决Vue3项目中，引入公共模块后出现useRouter()返回undefined，以及调试发现存在两个vue-router.mjs文件的冲突问题。

问题描述： 系统管理模块(system)依赖公共模块(common)，common模块包含路由配置(route.js)和Vue Router引用。将common模块发布到内网Nexus后，system模块引入common模块后，useRouter()返回undefined。调试显示项目存在两个vue-router.mjs文件。然而，使用yarn link @ht/common引入common模块，问题则消失。

问题根源： common模块和system模块都依赖vue-router。由于common模块以npm包形式发布到内网Nexus，system模块通过npm安装，导致项目安装了两个vue-router版本，造成冲突。yarn link创建符号链接，避免了重复安装。

解决方案： 确保项目仅使用一个版本的vue-router。以下方法可供选择：

1. 版本一致性: 检查common和system模块的package.json，确保vue-router版本一致。版本不一致，需调整其中一个模块的vue-router版本。

2. 依赖提升: 从common模块的dependencies中移除vue-router，在system模块的dependencies中直接声明。system模块将直接从项目根目录安装vue-router，避免版本冲突。 需相应调整common模块的路由配置，使其不再直接依赖vue-router。

3. 模块结构优化: 重新评估common模块设计。如果common模块仅提供通用组件和工具函数，则不应包含路由配置。路由配置应放在system模块或更高级别的路由配置模块中。

通过以上方法，可有效避免vue-router版本冲突，解决useRouter()返回undefined的问题。核心在于确保项目中只有一个版本的vue-router被正确加载和使用。

以上是Vue3项目引入公共模块后出现vue-router.mjs冲突：如何解决useRouter()返回undefined的问题？的详细内容。更多信息请关注PHP中文网其他相关文章！