使用Single-SPA与Vite时无法获取微前端资源（图片404）

我有一个Single-SPA应用，其中root-config运行在9000端口，Vite-Vue子应用运行在9001端口。但运行应用时，Vite-Vue中的png图片无法在localhost:9000获取，抛出404错误。

我做了一些调研但没找到太多有用信息，认为需要修改vite.config文件，于是使用Vite的URL特性来修改图片的资源URL：

<template>
  <img id="logo" alt="Vue logo" v-bind:src="getImageUrl('logo')" />&nbsp;&nbsp;----> function added to src
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
const imgUrl = new URL('./assets/logo.png', import.meta.url).href

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    getImageUrl(name) { ----> created function to modify the url 
      const a = new URL(`./assets/logo.png`, import.meta.url).href
      console.log(a)
      return new URL(`./assets/${name}.png`, import.meta.url).href
    }
  }
}
</script>

我创建了getImageUrl函数，试图将./assets/logo.png转换为/localhost:9000/src/assets/logo.png并绑定到图片src，同时我的vite.config文件如下：

import { resolve } from 'path';
import vue from '@vitejs/plugin-vue'

export default {
  rollupOptions: {
    input: 'src/main.js',
    format: 'system',
    preserveEntrySignatures: true,
    output: {
      assetFileNames: (asset) => {
        if (asset === 'logo') {
          return "/src/assets/logo.png";
        }
      }
    },
  },
  base: 'http://localhost:8001',
  plugins: [vue({
    template: {
      transformAssetUrls: {
        base: '/src'
      }
    }
  })],
}

但这种方式无效，我不确定是否走对了解决方向，希望得到帮助。若您有React相关的解决方案也可以。

内容的提问来源于stack exchange，提问作者inesvbm