vue.js - 带有 Webpack 模块联合的 Vue 3 CLI：组件从错误的主机加载

Question

我目前正在尝试建立一个使用 Webpack 的 Module Federation 来共享组件的项目。

为此，我使用 cli 设置了两个基本的 vue 项目，并在两个项目中添加了一个 vue.config.js 文件：

宿主项目（将包括共享组件）（在 localhost:8000 上运行）

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

module.exports = {
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'shell',
        filename: 'remoteEntry.js',
        remotes: {
          component: 'component@http://localhost:8001/remoteEntry.js'
        },
        exposes: {},
        shared: {}
      })
    ]
  }
}

组件项目（共享组件）（在 localhost:8001 上运行）：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'component',
        filename: 'remoteEntry.js',
        remotes: {},
        exposes: {
          './HelloWorld': './src/components/HelloWorld.vue'
        },
        shared: {}
      })
    ]
  }
}

我尝试在我的 App.vue 中加载组件：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <otherComp />
</template>

<script>
import { defineAsyncComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

const otherComp = defineAsyncComponent(() => import("component/HelloWorld"));

export default {
  name: "App",
  components: {
    HelloWorld,
    otherComp,
  },
};
</script>

实际上，它会尝试加载组件，但不是从 localhost:8001（组件所在的位置）加载它，而是尝试从 localhost:8000 加载它：

localhost:8001 上的相同路径确实存在。一些调试显示，webpack publicPath 似乎设置为“/”（导致 localhost:8000 的托管应用程序将 url 设置为/js/src_components_HelloWorld_vue.js）

/******/    /* webpack/runtime/publicPath */
/******/    !function() {
/******/        __webpack_require__.p = "/";
/******/    }();

我相信这是由于 vue-cli 与 webpack 交互的方式。这是一个已知问题吗？如何解决？

score 1 · Accepted Answer

您是否尝试更改publicPath变量（source）？它采用绝对路径作为默认值，但您必须在两个项目中/明确设置它们。vue.config.js我描述了一个关于如何配置它的详细示例。为简单起见，宿主项目是暴露组件的项目。消费者项目是使用这些远程组件的项目。

宿主项目应该公开组件。因此，您明确需要将publicPath变量设置为完整的主机名。请注意，devServer.port设置为 8000，因此您不必手动执行此操作。

 // vue.config.js host project 

 const ModuleFederationPlugin =
   require("webpack").container.ModuleFederationPlugin;

 module.exports = {
   publicPath: "http://localhost:8000/",
   configureWebpack: {
     plugins: [
       new ModuleFederationPlugin({
         name: "host",
         filename: "remoteEntry.js",
         exposes: {
           "./HelloWorld": "./src/components/HelloWorld",
         },
       }),
     ],
   },
   devServer: {
     port: 8000,
   },
 };

另一方面，我们有一个使用这些组件的项目，这些组件是通过remotes字段指定的。为了简单起见，这是消费者项目。同样，我们将设置publicPath为运行它的主机。请注意，要使用远程组件，我们必须知道宿主项目的名称、主机名和端口：host@http://localhost:8000/remoteEntry.js.

 // vue.config.js consumer project

 const ModuleFederationPlugin =
   require("webpack").container.ModuleFederationPlugin;

 module.exports = {
   publicPath: "http://localhost:8001/",
   configureWebpack: {
     plugins: [
       new ModuleFederationPlugin({
         name: "consumer",
         filename: "remoteEntry.js",
         remotes: {
           host: "host@http://localhost:8000/remoteEntry.js",
         },
       }),
     ],
   },
   devServer: {
     port: 8001,
   },
 };

你可以在这个Github存储库中从 Webpack Module Federation 的作者那里找到一个非常详细的示例。这个示例项目同时使用了 Vue 和 Webpack。您可能还需要一些附加功能：

使用该remotes选项，您可以指定多个远程源。这就是拥有许多微前端的想法。例如：

 new ModuleFederationPlugin({
   // ...
   remotes: {
     host: "host@http://localhost:8000/remoteEntry.js",
     other: "other@http://localhost:9000/remoteEntry.js",
   }
 })

该shared选项允许您在实例之间共享依赖项。例如，您可以共享 UIkit，以便两个实例具有相同的样式。但是，在共享 vue、react 或 angular 等软件包时仍有一些注意事项。您可能会遇到以下错误：Shared module is not available for eager consumption. 这篇文章描述了解决这个问题的几种方法，这是其中之一：
```
 const deps = require('./package.json').dependencies

 new ModuleFederationPlugin({
   // ...
   shared: {
     ...deps,
     vue: {
       eager: true,
       singleton: true,
       requiredVersion: deps.vue,
       strictVersion: true,
     },
   },
 })
```

注意：ModuleFederation 仅包含在 webpack 5（及更高版本）中。

vue.js - 带有 Webpack 模块联合的 Vue 3 CLI：组件从错误的主机加载

1 回答 1

Related

Reference