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>
