無界微前端

https://wujie-micro.github.io/doc/

因為使用的是vue項目主應用和次應用都是 所以用的封裝的。
https://wujie-micro.github.io/doc/pack/

主應用

安裝 選擇對應的版本

# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S

你可以在主應用新建一個路由

<template><WujieVue width="100%" height="100%" name="logs" :url="url" :props="props" :sync="true"></WujieVue>
</template><script setup>
import { useUserStore } from "@/stores/modules/user";
import { computed, ref } from "vue";
import { useAppStore } from "@/stores/modules/app";const appStore = useAppStore();
const appNow = computed(() => appStore.nowApp);
const userStore = useUserStore();
const url = "http://xxxx";
const props = computed(() => {return {xxx};
});
</script><style></style>

props是共享的數據

子應用

不需要安裝依賴包

if (window.__POWERED_BY_WUJIE__) {let app: any;window.__WUJIE_MOUNT = () => {app = createApp(App);app.use(ElementPlus);app.use(pinia);app.use(router);app.mount("#app");const globalStore = useGlobalStore();globalStore.$reset();nextTick(() => {if (window.$wujie) {const { token, userInfo, nowApp, appList } = window.$wujie.props;// xxxx 處理主應用共享的數據}});};window.__WUJIE_UNMOUNT = () => {app.unmount();};/*由于vite是異步加載，而無界可能采用fiber執行機制所以mount的調用時機無法確認，框架調用時可能vite還沒有加載回來，這里采用主動調用防止用沒有mount無界mount函數內置標記，不用擔心重復mount*/window.__WUJIE.mount();
}else{
// 正常amount
}

nginx配置

因為會跨域 所以靜態資源要允許跨域，子應用添加允許主應用跨域。

    location ~ .*\.(js|css)?${# 全局跨域設置add_header 'Access-Control-Allow-Origin' 'xxxx';expires      12h;error_log /dev/null;access_log /dev/null;}

其他的 比如接口什么的，服務端也要放通對應的地址。或者都交給nginx。