qiankun vite 子应用的静态资源设置

1. 主应用传入entry到props

const fetchAppProject = () => {
  return  {
    project: '01',
    theme: "01",
    entry: "/dist-01",
  }
}

const containerRef = ref(null)

const microApp = null;

onMounted(() => {
  const config = fetchAppProject();
  microApp = loadMicroApp({
    name: config.project,
    entry: config.entry,
    container: containerRef.value,
    props: {
      entry: config.entry,
      theme: config.theme
    },
  })
})

onUnmounted(() => {
  microApp && microApp.unmount();
})

2. 子应用保存entry

let app = null;
var STATIC_DIR = '';

function render(props) {
    console.log('props', props)
    app = createApp(App)
    // 其他配置
    app.mount(props?.container ? props?.container.querySelector('#container') : '#container')
    STATIC_DIR = props?.entry ? props?.entry : '';
    app.config.globalProperties.$STATIC_DIR = STATIC_PATH;
}

3. 使用静态资源示例

<van-image :src="`${STATIC_DIR}/static/logo.png`"></van-image>

4. vite.config.js 修改 base

export default defineConfig({
    // 其他配置
    base: "dist-01", 
    build: {
      outDir: 'dist-01', // 设置输出目录，方便部署
    },
})

5. 部署目录结构

./main
    - assets/
    - index.html
    - dist-01
        - assets/
        - index.html