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 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
解决方案： 确保项目仅使用一个版本的vue-router。以下方法可供选择：
-
版本一致性: 检查common和system模块的
package.json，确保vue-router版本一致。版本不一致，需调整其中一个模块的vue-router版本。 -
依赖提升: 从common模块的
dependencies中移除vue-router，在system模块的dependencies中直接声明。system模块将直接从项目根目录安装vue-router，避免版本冲突。 需相应调整common模块的路由配置，使其不再直接依赖vue-router。 -
模块结构优化: 重新评估common模块设计。如果common模块仅提供通用组件和工具函数，则不应包含路由配置。路由配置应放在system模块或更高级别的路由配置模块中。
通过以上方法，可有效避免vue-router版本冲突，解决useRouter()返回undefined的问题。核心在于确保项目中只有一个版本的vue-router被正确加载和使用。
