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

【问题标题】：Vue CLI Module Federation is component is not found in the Host AppVue CLI 模块联合是在主机应用程序中找不到组件
【发布时间】：2021-03-27 06:08:56
【问题描述】：

我在两个 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：

我遇到的问题是当我尝试在 Container App 中使用组件时：

似乎找不到组件，我注意到容器的请求转到容器应用程序而不是组件应用程序。不确定这是问题还是正常行为以及其他问题是否正常。

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

【问题讨论】：

您介意提供一个示例 repo 吗？

标签： javascript vue.js webpack module vue-cli

【解决方案1】：

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

output: {
  publicPath: 'auto',
},

更多详情请参考以下链接Output | webpack

【讨论】：