记录一次无界微前端的简单使用

无界微前端

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。