无法让 Ant Design 与 Vue 3 微前端应用程序配合使用

Question

我正在使用 vite-plugin-federation 使用 Vue 3 创建一个微前端应用程序。有一个 remote 应用程序公开组件，还有一个 host 应用程序将使用这些组件。我已经成功地将简单和嵌套的组件从 remote 应用程序联合到 host，但是基于 Ant Design (antd) 的组件不会在 host 上渲染。

这里以一个组件为例：

BasicComponent.vue

<template>
    <span>This is a basic component</span>
    
    <a-button type="primary">Basic Ant Button</a-button>

    <SubComponent />
</template>
<script setup>
import SubComponent from "./SubComponent.vue"
</script>

这是我的 remote 的 vite.config.js 文件：

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "remote",
      filename: "remoteEntry.js",
      exposes: {
        "./Header": "./src/components/Header.vue",
        "./BasicComponent": "./src/components/BasicComponent.vue",
      },
      shared: ["vue", "ant-design-vue", "@ant-design/icons-vue", "vue-router"],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

这是 host 的 vite.config.js 文件：

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "host",
      remotes: {
        remoteApp: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["ant-design-vue", "@ant-design/icons-vue", "vue-router"],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

这是 main.js（在远程和主机上）

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App)

app.use(router)

app.use(Antd)

app.mount('#app')

这是我尝试在主机上使用

BasicComponent

的方法：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue'
import BasicComponent from 'remoteApp/BasicComponent'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/basic',
      name: 'Basic',
      component: BasicComponent
    },
  ]
})

export default router

我尝试过在

vite.config.js

文件中共享和不共享 ant-design-vue，但没有成功。

<a-button>

在

remote

应用程序上完美呈现为 <button>，但在

host

应用程序中使用时仍保持 <a-button>。此外，网络浏览器的开发者控制台上没有错误或警告。

Answer 1

所以，我能够弄清楚这一点。 host 的 vite.config.js 需要以与

remote

相同的方式共享 vue。所以，而不是：

shared: ["ant-design-vue", "@ant-design/icons-vue", "vue-router"],

一定是：

shared: ["vue", "vue-router"],

当我将

vue

添加到主机上的共享列表时，我必须处理以下错误：

顶级等待在配置的目标环境中不可用

但是感谢 vite-plugin-top-level-await 包，我能够解决这个问题。 另一个线程提到添加

build.target: "esnext"

，但我已经在我的vite.config.js中添加了它，所以它对我不起作用。

antd（Ant Design）包不必在 host 上共享，并且共享的

vue

似乎为设计框架的运行创建了某种必要的上下文。