Nuxt3 + 模块联邦

Question

我正在尝试使用 Nuxt 3 测试模块联合，但我遇到了一些问题。

当前设置

我正在使用 docker 容器在本地进行测试。

远程图书馆

我正在尝试使用webpack模块联合示例之一，即

vue3-demo /home/

，作为通过

localhost:3002

（来自其自己的文件夹）在

npm run serve

上公开的远程库，并导入/使用其公开的

Button 

我的定制水疗中心中的组件。
（这个应用程序在单个节点：20个容器中运行）

我的水疗中心

我目前正在使用一个用 Nuxt 3 制作的简单测试 spa，该应用程序是通过

npm run generate

和

ssr: false

静态构建的，并由

localhost

上的 nginx 公开。
（为此，我使用 node:20 容器来构建，并使用 nginx 容器来提供服务）

查看远程库的对应示例 (

vue3-demo /layout/

)，我安装了

webpack

软件包并以这种方式更新了我的 spa

nuxt.config.ts

：

const { ModuleFederationPlugin } = require('webpack').container;

export default defineNuxtConfig({

  webpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'layout',
        filename: 'remoteEntry.js',
        remotes: {
          home: 'home@http://localhost:3002/remoteEntry.js',
        },
        exposes: {},
        shared: {
          vue: {
            singleton: true,
          },
        },
      }),
    ],
  }
})

并且水疗中心仍然可以正常构建。

然后我更新了其中一个组件（即

components/header.vue

），尝试包含库中公开的

Button

组件：

<script setup>
import { defineAsyncComponent } from "vue";

const RemoteButton = defineAsyncComponent(() => import("home/Button"));
const nuxtApp = useNuxtApp();
nuxtApp.component("remote-button", RemoteButton);
</script>

现在尝试构建时出现错误。

构建错误

> generate
> nuxt generate


 WARN  Changing NODE_ENV from development to production, to avoid unintended behavior.                                    7:49:49 AM

Nuxt 3.7.4 with Nitro 2.6.3                                                                                               7:49:50 AM
ℹ Building client...                                                                                                     7:49:53 AM
ℹ vite v4.4.9 building for production...                                                                                 7:49:53 AM
transforming (115) node_modules/@nuxt/ui-templates/dist/templates/error-dev.vueCould not resolve id home/Button /home/node/app/components/header.vue                                                     7:49:54 AM
Could not resolve id home/Button /home/node/app/components/header.vue                                                     7:49:54 AM
ℹ ✓ 119 modules transformed.                                                                                             7:49:54 AM
ℹ ✓ built in 1.16s                                                                                                       7:49:54 AM

 ERROR  [vite]: Rollup failed to resolve import "home/Button" from "/home/node/app/components/header.vue".                7:49:54 AM
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external


[7:49:54 AM]  ERROR  Nuxt Build Error: [vite]: Rollup failed to resolve import "home/Button" from "/home/node/app/components/header.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

  This is most likely unintended because it can break your application at runtime.
  If you do want to externalize this module explicitly add it to
  build.rollupOptions.external
  at viteWarn (node_modules/vite/dist/node/chunks/dep-df561101.js:48142:27)
  at onRollupWarning (node_modules/vite/dist/node/chunks/dep-df561101.js:48174:9)
  at onwarn (node_modules/vite/dist/node/chunks/dep-df561101.js:47902:13)
  at node_modules/rollup/dist/es/shared/node-entry.js:24276:13
  at Object.logger [as onLog] (node_modules/rollup/dist/es/shared/node-entry.js:25950:9)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:24862:26)
  at ModuleLoader.resolveDynamicImport (node_modules/rollup/dist/es/shared/node-entry.js:24920:58)
  at async node_modules/rollup/dist/es/shared/node-entry.js:24807:32

更新#1

将以下代码添加到

nuxt.config.ts

：

  vite: {
    build: {
      rollupOptions: {
        external: 'home/Button'
      }
    },
  }

现在水疗中心构建正确（即

npm run generate

期间没有错误），但现在我在浏览器控制台中收到以下错误：

Answer 1

看来构建工具还是

vite

，而你的配置中不包含vite，你应该用

builder: 'webpack',

来配置。 但另一方面，当我配置

builder: 'webpack'

时，会出现各种错误，我认为这是npm包的bug

@nuxt/webpack-builder

。