vite作為子應(yīng)用需要配置以下
主應(yīng)用入口
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的作用是因?yàn)関ite開(kāi)發(fā)模式下引入的資源是相對(duì)路徑卵佛，但是子應(yīng)用也是vite的情況下港华，主應(yīng)用加載資源的時(shí)候就會(huì)以主應(yīng)用為域名去加載野哭，加載不到子應(yīng)用的資源品腹，所以無(wú)法執(zhí)行；需要處理子應(yīng)用靜態(tài)資源，寫(xiě)一個(gè)簡(jiǎn)易的插件，對(duì)開(kāi)發(fā)環(huán)境的子應(yīng)用進(jìn)行處理蒜哀，補(bǔ)全靜態(tài)資源路徑。
loader(code) {
if (process.env.NODE_ENV === 'development') {
// 這里 /vite-vue3-ts/ 需要和子應(yīng)用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 默認(rèn)關(guān)閉沙箱(樣式等其他等待版本更新)
事件通信(主應(yīng)用傳遞消息給子應(yīng)用)
import microApp from '@micro-zoe/micro-app';
// appname-vite應(yīng)用名稱
microApp.setData('appname-vite', {a: 1});
//通過(guò)data傳遞的參數(shù)子應(yīng)用只會(huì)再初始時(shí)監(jiān)聽(tīng)到吏砂，后續(xù)發(fā)生的變化無(wú)法檢測(cè)
<micro-app :data="val" name='appname-vite' url="http://localhost:5001/vite-vue3-ts/" @datachange='handleDataChange'></micro-app>
事件通信(子應(yīng)用接收主應(yīng)用的消息)
// 主動(dòng)獲取基座下發(fā)的數(shù)據(jù)
//window.eventCenterFor+應(yīng)用名稱
window.eventCenterForAppNameVite.getData()
/**
* 綁定監(jiān)聽(tīng)函數(shù)
* dataListener: 綁定函數(shù)
* autoTrigger: 在初次綁定監(jiān)聽(tīng)函數(shù)時(shí)如果有緩存數(shù)據(jù)撵儿，是否需要主動(dòng)觸發(fā)一次，默認(rèn)為false
*/
// 第二個(gè)參數(shù)為true時(shí)會(huì)一直監(jiān)聽(tīng)數(shù)據(jù)變化
window.eventCenterForAppNameVite.addDataListener((data: Record<string, unknown>) => {
console.log('child-vite addDataListener:', data)
},true)
事件通信(子應(yīng)用傳遞消息給主應(yīng)用)
window.eventCenterForAppNameVite.dispatch({ myname: 'child-vite', count:count.value})
事件通信(主應(yīng)用接收子應(yīng)用消息)
<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('來(lái)自子應(yīng)用 child-vite 的數(shù)據(jù):', e.detail.data)
}
</script>
