publicPath 不起作用，但 __webpack_public_path__ 起作用

如何解决publicPath 不起作用，但 __webpack_public_path__ 起作用

我正在构建一个单一的 SPA 应用程序，但在部署方面遇到了问题。 我将每个应用程序部署在子目录（app-bar-mf、products-mf 等）中，并在根目录下部署 root-config（主应用程序）。

在本地工作时，每个应用程序都通过其自己的服务器（localhost:9000、localhost:9001 等）提供服务，因此此处没有子目录。

当我尝试部署时，不使用 publicPath，并且资产通过“/img/foo.png”而不是“/products-mf/img/foo.png”提供。

如果我在 main.js 中设置 __webpack_public_path__，一切都会按预期进行。

有什么线索吗？

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/products-mf/" : "/",configureWebpack: () => {
    const conf = {
      externals: [
        "vue","vuex","vue-router","vue-i18n"
      ]
    };

    if (process.env.NODE_ENV === "production") {
      conf.output = { "products.js" };
    }

    return conf;
  },filenameHashing: false,transpileDependencies: ["vuetify"]
};

解决方法

在单 SPA 项目中，我们使用 systemjs-webpack-interop 以根据托管微前端的 URL 动态设置 __webpack_public_path__。这对于数百个单一 spa 应用程序运行良好，因此您可以考虑使用相同的逻辑。此插件包含在 create-single-spa 生成的 Vue 项目中。