micro-app vite配置

micro-app官网

vite作为子应用需要配置以下
主应用入口

import microApp from '@micro-zoe/micro-app';
microApp.start({
  plugins: {
    modules: {
      // 此处的appname-vite必须和  <micro-app name='appname-vite' url="http://localhost:5001/vite-vue3-ts/"></micro-app> 一致
      'appname-vite': [
        {
          // loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法执行；需要处理子应用静态资源，写一个简易的插件，对开发环境的子应用进行处理，补全静态资源路径。
          loader(code) {
            if (process.env.NODE_ENV === 'development') {
              // 这里 /vite-vue3-ts/ 需要和子应用vite.config.js中base的配置保持一致
              code = code.replace(/(from|import)(\s*['"])(\/vite-vue3-ts\/)/g, all => {
                return all.replace('/vite-vue3-ts/', 'http://localhost:5001/vite-vue3-ts/')
              })
            }
            return code
          }
        }
      ]
    }
  }
});

vite 默认关闭沙箱(样式等其他等待版本更新)
事件通信(主应用传递消息给子应用)

import microApp from '@micro-zoe/micro-app';
// appname-vite应用名称
microApp.setData('appname-vite', {a: 1});

//通过data传递的参数子应用只会再初始时监听到，后续发生的变化无法检测
<micro-app :data="val" name='appname-vite' url="http://localhost:5001/vite-vue3-ts/" @datachange='handleDataChange'></micro-app>

事件通信(子应用接收主应用的消息)

// 主动获取基座下发的数据
//window.eventCenterFor+应用名称
window.eventCenterForAppNameVite.getData()

/**
 * 绑定监听函数
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 */
// 第二个参数为true时会一直监听数据变化
window.eventCenterForAppNameVite.addDataListener((data: Record<string, unknown>) => {
  console.log('child-vite addDataListener:', data)
},true)

事件通信(子应用传递消息给主应用)

window.eventCenterForAppNameVite.dispatch({ myname: 'child-vite', count:count.value})

事件通信(主应用接收子应用消息)

<template>
    <micro-app name='appname-vite' url="http://localhost:5001/vite-vue3-ts/" @datachange='handleDataChange'></micro-app>
</template>
<script lang="ts" setup>
import microApp from '@micro-zoe/micro-app'
function handleDataChange (e: CustomEvent): void {
   console.log('来自子应用 child-vite 的数据:', e.detail.data)
}
</script>