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。以下方法可供選擇：
-
版本一致性: 檢查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被正確加載和使用。
