Vue3+Vite微前端：宿主应用内导航远程应用路由方案咨询

核心问题解答 #

可以在宿主应用内导航远程应用的路由，但直接导出带路由的App.vue会因路由实例冲突、初始化逻辑冲突导致失败，需要调整导出策略和路由共享方式。

通用解决方案步骤 #

1. 重构远程应用的导出内容 #

不要直接导出带路由实例的App.vue，改为导出路由配置对象和无路由依赖的根组件，同时确保vue和vue-router单例共享：

远程应用新建路由导出文件

在远程应用src目录下创建exposes/router.js：

// src/exposes/router.js
import Home from '../views/Home.vue'
import About from '../views/About.vue'

// 导出纯路由配置（不带已创建的路由实例）
export const remoteRoutes = [
  {
    path: '/remote-home',
    name: 'RemoteHome',
    component: Home
  },
  {
    path: '/remote-about',
    name: 'RemoteAbout',
    component: About
  }
]

修改远程应用Vite配置

更新vite.config.js的federation配置，调整暴露内容并强制单例共享依赖：

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    federation({
      name: "remote-app",
      filename: "remoteEntry.js",
      exposes: {
        "./RemoteRoutes": "./src/exposes/router.js", // 导出路由配置
        "./RemoteRoot": "./src/App.vue" // 导出无路由实例的根组件
      },
      shared: { 
        vue: { singleton: true }, 
        'vue-router': { singleton: true } // 关键：确保依赖单例，避免多实例冲突
      },
    }),
  ],
  // ...其他配置
});

2. 宿主应用集成远程路由 #

在宿主应用的路由配置中，动态导入远程路由并合并到宿主路由体系：

// 宿主应用 src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HostHome from '../views/HostHome.vue'

// 异步加载远程路由配置
const loadRemoteRoutes = async () => {
  const { remoteRoutes } = await import('remote/RemoteRoutes')
  return remoteRoutes
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'HostHome',
      component: HostHome
    },
    // 合并远程路由到宿主路由表
    ...(await loadRemoteRoutes())
  ]
})

export default router

如果需要将远程路由嵌套在宿主某个路由下：

// 宿主路由配置示例
{
  path: '/remote',
  name: 'RemoteWrapper',
  component: () => import('remote/RemoteRoot'),
  children: await loadRemoteRoutes()
}

3. 修复远程应用的初始化逻辑 #

让远程应用同时支持独立运行和作为微前端远程组件加载：

修改远程应用src/main.js：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import { remoteRoutes } from './exposes/router.js'

// 判断是否处于微前端远程加载环境
const isRemoteEnv = typeof window.__FEDERATION__ !== 'undefined'

if (!isRemoteEnv) {
  // 独立运行时，正常初始化路由和应用
  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: remoteRoutes
  })
  createApp(App).use(router).mount('#app')
} else {
  // 作为远程组件时，不创建路由实例，由宿主统一管理
  export const initRemoteApp = (router) => {
    return createApp(App).use(router)
  }
}

4. 调整宿主应用Vite配置 #

确保宿主应用也同步单例共享vue和vue-router：

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    federation({
      name: "host-app",
      remotes: {
        remote: "http://127.0.0.1:5173/dist/assets/remoteEntry.js",
      },
      shared: { 
        vue: { singleton: true }, 
        'vue-router': { singleton: true } // 和远程配置保持一致
      },
    }),
  ],
  // ...其他配置
});

常见问题排查 #

• 路由导航失效：检查vue-router是否在宿主和远程都设置为singleton: true，多实例会导致路由状态不一致。
• 远程组件加载失败：确认远程应用已正确构建，暴露的路径与宿主导入路径匹配，远程服务可正常访问。
• 样式冲突：给远程应用根组件添加唯一类名，通过CSS作用域或命名空间隔离样式。

内容的提问来源于stack exchange，提问作者user2609694