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

代码哈士奇2025-04-28 11:44

记录一次无界微前端使用

无界微前端
主应用
子应用
nginx配置

无界微前端

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

因为使用的是vue项目主应用和次应用都是所以用的封装的。
https://wujie-micro.github.io/doc/pack/

主应用

安装选择对应的版本

js 复制代码

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

你可以在主应用新建一个路由

js 复制代码

<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是共享的数据

子应用

不需要安装依赖包

js 复制代码

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配置

因为会跨域所以静态资源要允许跨域，子应用添加允许主应用跨域。

js 复制代码

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

其他的比如接口什么的，服务端也要放通对应的地址。或者都交给nginx。