Vue CLI 模块联合是在主机应用程序中找不到组件

Question

我正在两个 Vue CLI 项目中实现模块联合

容器应用程序位于：http://localhost:8082/ 组件应用程序位于：http://localhost:8083/ 我在两个应用程序中都设置了 ModuleFederation 插件，我认为这没有问题：组件：

plugins: [
    new ModuleFederationPlugin({
        name: "data",
        filename: "remoteEntry.js",
        remotes: {},
        exposes: {
            './Bata' : './src/Bata.vue',

        },
        shared: {}
    }),
],

容器：

plugins: [
    new ModuleFederationPlugin({
        name: "appcontainer",
        filename: "remoteEntry.js",
        remotes: {
            "data" : "data@http://localhost:8083/remoteEntry.js" // Test app url see above
        },
        exposes: {},
        shared: {}
    }),
],

组件在以下位置提供服务：http://localhost:8083/remoteEntry.js：

我遇到的问题是当我尝试在容器应用程序中使用该组件时：

似乎找不到该组件，我注意到对容器的请求转到容器应用程序而不是组件应用程序。不确定这是问题还是正常行为，还有其他问题无法正常工作。

8082 是容器应用程序，如果我用 8083（组件应用程序）打开相同的 url，组件就在那里。

Answer 1

如果 PublicPath 不正确，您会收到此错误。您可以通过将其设置为“自动”来解决此问题，如下所示。 "auto" 将自动确定 public 路径。

output: {
  publicPath: 'auto',
},

详情请参考下方linkOutput | webpack

Vue CLI 模块联合是在主机应用程序中找不到组件

Vue CLI Module Federation is component is not found in the Host App

javascript

module

webpack

vue.js

vue-cli