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中文網其他相關文章！