vue3 + vite 微前端内部的子路由答案

【问题标题】：Sub routes inside the vue3 + vite micro frontendvue3 + vite 微前端内部的子路由
【发布时间】：2023-01-07 20:17:45
【问题描述】：

我正在使用 vue3 + vite 和一个插件

@originjs/vite-plugin-federation

构建一个微前端。一个应用程序将成为主机，一个将成为远程应用程序，两者都有自己的路由。有没有办法在主机应用程序内导航远程应用程序。

如果我从远程应用程序导出单个组件它正在工作，但如果我使用路由导出 App.js 它不起作用，任何人都可以提供解决此问题的一般指南。

vite远程配置：

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import federation from "@originjs/vite-plugin-federation";
const dependencies = require("./package.json").dependencies;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    federation({
      name: "remote-app",
      filename: "remoteEntry.js",
      exposes: {
        "./Test": "./src/App.vue",
      },
      shared: [{ ...dependencies }, "vue", "vue-router"],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

主机vite.config：

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    federation({
      name: "host-app",
      remotes: {
        remote: "http://127.0.0.1:5173/dist/assets/remoteEntry.js",
      },
      shared: ["vue"],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

【问题讨论】：

标签： vuejs2 vuejs3 vite micro-frontend webpack-module-federation

【解决方案1】：

我认为这回答了你的问题

https://github.com/originjs/vite-plugin-federation/discussions/219

【讨论】：