javascript - publicPath 不起作用，但 __webpack_public_path__ 起作用

Question

我正在构建一个单一的 SPA 应用程序，并且面临部署问题。我将每个应用程序部署在一个子目录（app-bar-mf、products-mf 等）中，并将 root-config（主应用程序）部署在基础上。

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

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

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

有什么线索吗？

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"]
};

Answer 1

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