wujie无界微前端框架初使用

先说一下项目需求：将单独的四套系统的登录操作统一放在一个入口页面进行登录，所有系统都使用的是vue3，（不要问我为啥会这样设计，产品说的客户要求）

1.主系统下载wujie

我全套都是vue3，所以直接下vue3的

npm i wujie-vue3 -S

不知道官网为什么要把下载依赖单独放这里。。。

官网地址：Vue组件封装 | 无界

2.主系统的main.js中引入wujie

// 导入 WuJie.js 的 Vue3 集成
import WujieVue from "wujie-vue3";
const { bus, setupApp, preloadApp, destroyApp } = WujieVue;// 配置子系统入口
setupApp({name: 'sub-app',url: 'http://localhost:8081', // 子应用的 URLattrs: {src: 'http://localhost:8081',},
});const app = createApp(App)
app.use(WujieVue);
app.mount('#app')

3.配置子应用入口页面路由并且新建这个页面

router.js文件

新建页面路径

4.pre.vue页面代码

<template><div class="pre"><WujieVuewidth="100%"height="100%":name="appName":url="appUrl":sync="true":props="appProps":attrs="appAttrs":alive="true"/></div>
</template><script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import  WujieVue  from 'wujie-vue3';
// 动态获取路由参数，匹配子应用
const appName = '/pre';
const appUrl = 'http://localhost:8081';
const appProps = { user: 'admin' };
const appAttrs = { "data-custom-attr": "example" }; // 自定义属性
</script><style lang="scss" scoped>
.pre{height: 100%;
}
</style>

主应用已经配置好了，接下来是子应用

打开子应用的vite.config.js文件

origin和上面主应用的appUrl要一样，开启允许跨域

server: {cors: true, // 允许跨域port: 8081,// host: true,host: '0.0.0.0', // 确保可以通过 IP 访问origin: 'http://localhost:8081', // 子应用的访问地址（与主应用匹配）对应appUrlopen: true,headers: {'Access-Control-Allow-Origin': '*', // 明确允许主应用跨域访问},proxy: {// https://cn.vitejs.dev/config/#server-proxy'/dev-api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (p) => p.replace(/^\/dev-api/, '')}}},

最后试一下传参

子应用的main.js文件中直接打印，子应用我使用的是ruoyi框架，具体插入位置在下图，随便放就好，不影响，另外这个接收的参数是在主应用里面传入的，参考第4步的步骤，如果你是每一步都照着我的操作来的话就不用再去检查了