publicPath does not work but __webpack_public_path__ does

Question

I am building a Single SPA application and am facing problems toward deployment. I am deploying each app inside a subdirectory (app-bar-mf, products-mf, and so on), and root-config (the main application) at base.

When working locally, each app is served through it's own server (localhost:9000, localhost:9001, and so on) so no subdirectories here.

When I am trying to deploy, the publicPath is not used, and assets are served through "/img/foo.png" instead of "/products-mf/img/foo.png".

If I set __webpack_public_path__ in my main.js, everything works as expected.

Any clues ?

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

score 0 · Answer 1 · answered Feb 23 '21 at 07:17

In single-spa projects, we use systemjs-webpack-interop in order to set the __webpack_public_path__ dynamically based on the URL of where the microfrontend is hosted. This has worked well for hundreds of single-spa applications so you could consider using the same logic. This plugin is included in Vue projects generated by create-single-spa.

publicPath does not work but __webpack_public_path__ does

1 Answers1