Assets (Images/MDI Icons) loaded from wrong origin when microfrontend is integrated with Qiankun

[rafaelmmedeiros]

Assets (Images/MDI Icons) loaded from wrong origin when microfrontend is integrated with Qiankun

Description:
I'm developing a Vue 3 microfrontend with Vite and integrating it into Qiankun using vite-plugin-qiankun. When running standalone, my images and MDI icons load correctly. However, when the microfrontend is loaded via the Qiankun orchestrator, the assets are requested from the orchestrator's origin (e.g., http://localhost:5173/) instead of the microfrontend’s origin (e.g., http://localhost:5174/), resulting in 404 errors and missing icons.

I have tried several approaches:

Setting the base option in vite.config.ts (using both relative and absolute URLs).
Using the postcss-url plugin to rewrite URLs for fonts and images.
Moving assets to the public/ directory and referencing them with absolute paths.
Ensuring local import of @mdi/font in the Vuetify plugin.
None of these solutions have resolved the issue. Has anyone encountered this problem or can suggest how to force asset requests to be made to the microfrontend’s origin when running under Qiankun?

---- vite.config.ts on vue3 app.

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

const appName = 'micro-vue3'

export default defineConfig({
  base: './',
  plugins: [
    vue(),
    qiankun(appName, {
      useDevMode: true
    })
  ],
  server: {
    port: 5174,
    cors: true,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  build: {
    target: 'esnext',
    cssCodeSplit: false,
    assetsInlineLimit: 4096,
    rollupOptions: {
      output: {
        format: 'system',
        entryFileNames: `${appName}.js`
      }
    }
  },
  define: {
    'process.env': {}
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

---- main.ts on Qiankun Orquestrator:

import { createApp } from 'vue'
import App from './App.vue'
import {registerMicroApps, setDefaultMountApp, start} from 'qiankun'

const app = createApp(App)

registerMicroApps([
  {
    name: 'micro-vue3',
    entry: '//localhost:5174',
    container: '#micro-viewport',
    activeRule: (location) =>
      location.hash.startsWith('/')
  }
]);

setDefaultMountApp("/");

start({
  sandbox: {
    strictStyleIsolation: false,
    experimentalStyleIsolation: false
  },
})

app.mount('#app')

---- vite.config.ts on Qiankun Orquestrator:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Any help would be greatly appreciated!