javascript - vue3引入公共模块后出现个vue-router.mjs？

Question

问题：

1. 项目启动后，使用useRouter()方法返回值为undefined

2. 通过debug发现存在2个vue-router.mjs

   • http://localhost:8161/node_modules/vue-router/dist/vue-router...
   • http://localhost:8161/node_modules/vue-router/dist/vue-router...

3. 如果使用yarn link @ht/common方式引入common模块则不存在以上问题

   项目结构：

4. common // 公共模块

   • route.js // 公共的router配置
   • index.vue
   • install.js
   • package.json

5. system // 系统管理模块

   • main.js
   • router.js
   • package.json

system依赖 common 模块，common做为公共依赖发布到内网的nexus中。
所以common的作用主要是管理通用的代码，组件和其他依赖的版本

common的package.json片段

{
  "name": "@ht/common",
  "version": "1.0.2",
  "description": "应用端-公共",
  "type": "module",
  "main": "./index.js",
  "module": "./index.js",
  "scripts": {
    "dev": "vite",
    "svgToJson": "node svgToJson.js",
    "build": "vite build",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "docs:dev": "vitepress dev docs --host 0.0.0.0",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "less": "^4.2.0",
    "vite": "^5.2.8",
    "vitepress": "^1.3.0"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@huitian/cesium-helper": "^1.0.2",
    "@iconify/tools": "^4.0.4",
    "@iconify/vue": "^4.1.2",
    "axios": "^1.7.2",
    "components-extent": "^1.1.2-beta.7",
    "echarts": "^5.5.1",
    "echarts-liquidfill": "^3.1.0",
    "element-plus": "^2.7.5",
    "event-source-polyfill": "^1.0.31",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "qs": "^6.12.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.3"
  }
}

system的package.json

{
  "name": "system",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "packageManager": "yarn@1.22.22",
  "dependencies": {
    "@ht/common": "^1.0.2",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "less": "^4.2.0",
    "unplugin-auto-import": "^0.17.6",
    "vite": "^5.2.8",
    "vite-plugin-vue-devtools": "^7.0.25"
  }
}

common/route.js

import {createRouter, createWebHashHistory} from 'vue-router';

export let router;
let options = {
  historyMode: createWebHashHistory(import.meta.env.BASE_URL),
};

/**
 * 定义默认路由
 */
let defaultRoutes = [
  {
    path: '/401',
    name: '401',
    component: () => import('../components/401.vue')
  },
];


export function createRoute(routes, opt){
  Object.assign(options, opt);

  if (options.historyMode instanceof Function) {
    options.historyMode = options.historyMode(import.meta.env.BASE_URL);
  }
  // 创建路由
  router = createRouter({
    history: options.historyMode,
    routes: [
      ...defaultRoutes,
      ...routes
    ],
  });

  if (import.meta.env.NODE_ENV == 'development') {
    window.router = router;
  }

  return router;
}

export default router;

common/index.vue

<template>
  <div>
    <router-view />
  </div>
</template>

<script setup>
import {useRoute, useRouter} from 'vue-router';

let router = useRouter();
let route = useRoute();

console.log(router); // undefined
console.log(route); // undefined

</script>

<style scoped lang="less">
</style>

common/install.js

import App from '@/App.vue';
import { createApp } from 'vue';
const app = createApp(App);

export default function createUseApp(mountBefore = () => {}) {
  const app = createApp(App);
  // ... 省略其他安装
  mountBefore(app);
  app.mount('#app');
  return app;
}

system/router.js

import {createRoute} from '@ht/common';

const routers = [
  {
    path: '/',
    redirect: '/index',
    component: () => import('@ht/common/index.vue'),
    children: [
      {
        path: '/index',
        name: '首页',
        component: () => import('@/views/index.vue')
      }
    ]
  }
];

const router = createRoute(routers);
export default router;

system/main.js

import CommonInstall from '@ht/common/install.js';
import router from './router.js';

CommonInstall(app => {
  app.use(router);
});

Answer 1

解答

问题1：项目启动后，使用useRouter()方法返回值为undefined

出现这个问题可能是因为你在common/index.vue中尝试在<script setup>中使用useRouter，但此时Vue Router的实例可能还没有被正确安装或初始化。由于useRouter和useRoute是Vue Router提供的Composition API函数，它们需要在Vue Router实例安装到Vue应用中后才能正确工作。

问题2：通过debug发现存在2个vue-router.mjs

这个问题很可能是由于模块解析或打包工具（如Vite）在处理公共模块（@ht/common）时发生了重复引入或解析错误。这可能是因为公共模块被安装到了项目的node_modules目录中，同时又通过yarn link或其他方式被链接到了项目中。

解决方案

1. 确保Vue Router实例的正确安装：在system/main.js中，你正在调用CommonInstall函数来安装Vue应用，但似乎没有直接展示app实例的创建。确保在调用app.use(router)之前，app实例已经被正确创建。

2. 检查公共模块的打包和引入：

   • 确认公共模块@ht/common是否应该被打包到系统模块中，或者作为一个独立的库被引入。
   • 如果公共模块是作为一个独立的库被引入，确保它没有自带Vue Router的副本，或者没有在系统模块中再次引入Vue Router。
   • 检查Vite或其他构建工具的配置，确保模块解析正确无误。
3. 避免使用yarn link：尽管yarn link在某些情况下可能很有用，但它也可能导致模块解析问题。如果可能的话，尝试不使用yarn link，而是直接通过包管理工具（如npm或yarn）来管理依赖。
4. 更新项目依赖：确保所有依赖都是最新的，并且彼此兼容。特别是Vue、Vue Router和Vite等核心依赖。
5. 检查import语句：确保所有的import语句都是正确的，并且指向了正确的模块。
6. 清理缓存和重新安装依赖：有时候，简单的清理项目缓存（如删除node_modules目录和package-lock.json或yarn.lock文件）并重新安装依赖可以解决问题。
7. 查看控制台和Vite日志：通常，构建工具会在控制台或日志文件中输出有用的错误信息，这些信息可以帮助你诊断问题。