无界(wujie)微前端集成react和vue3实战

管理后台项目，前端使用react+antd开发，新框架选型smartadmin vue3，技术方案为使用前端微服务集成两个项目，主应用为vue3，子应用为react；

前端微服务框架目前主流的有qiankun，wujie，MicroApp，推荐排名（引用大佬的图片）如下：

选用无界的原因：

        1.对子应用侵入少；

        2.接入成本较低；

        3.官方文档和示例很棒；

子应用篇：

        1.判断是否是子应用运行环境并隐藏菜单栏和导航栏，具体效果通过isSubapp控制；

export default function App() {
  const [isSubapp, setIsSubapp] = useState(window.top !== window);
  const [local] = useRecoilState(globalAtom.locale);
  return (
    <ConfigProvider locale={local.antd} componentSize="middle">
      <div className={`App ${isSubapp? "isSubapp" : ""}`}>
        <AutoRoutes></AutoRoutes>
      </div>
    </ConfigProvider>
  );
}

        2.菜单权限添加version标记用来区分子应用还是主应用，在子应用里面隐藏主应用的菜单，仅构建子应用的路由，子应用依然可以单独使用；

      //获取登录用户信息
      const res = await loginApi.getLoginInfo();
      //仅保留v1版本的菜单
      res.data.menuList = res.data.menuList.filter((item:any) => {
        return item.version == 'v1';
      });

主应用篇：

     

1.安装和引入wujie

npm install wujie-vue3 -s

import WujieVue from 'wujie-vue3';
...
app.use(WujieVue).mount('#app');

2.根据菜单version标记处理子应用路由，统一指向sub路由和sub组件；

    //获取登录用户信息
    const res = await loginApi.getLoginInfo();
    //子应用路由处理标记v1
    res.data.menuList = res.data.menuList.map((item) => {
      let obj = {...item};
      if(obj.menuType==2 && obj.version == 'v1'){
        obj.path = `/reactsub${obj.path}`;
        obj.component = `/system/reactsub/index.vue`;
      }
      return obj;
    });

3.创建子应用路由和组件；

import { homeRouters } from './system/home';
import { loginRouters } from './system/login';
import { helpDocRouters } from './support/help-doc';
import NotFound from '/@/views/system/40X/404.vue';
import NoPrivilege from '/@/views/system/40X/403.vue';
import Reactsub from '/@/views/system/reactsub/index.vue';

export const routerArray = [
    ...loginRouters,
     ...homeRouters, 
    ...helpDocRouters, 
    { path: '/reactsub/:path', name: 'react-sub', component: Reactsub },
    { path: '/:pathMatch(.*)*', name: '404', component: NotFound },
    { path: '/403', name: '403', component: NoPrivilege }
];

<template>
  <div class="user-subapp">

    <WujieVue
      width="100%"
      height="100%"
      name="server"
      :url="serverUrl"
      :alive="false"
      :sync="true"
      :after-mount="afterMount"
    />
  </div>
  
</template>
<script setup>
  import { computed, ref } from 'vue';
  import { useUserStore } from '/@/store/modules/system/user';
  import _ from 'lodash';
  import WujieVue from 'wujie-vue3';  
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const serverUrl = computed(() => {
    return `${import.meta.env.VITE_SUBAPP_URL}#/${router.currentRoute.value.path.replace('/reactsub/', '')}`;
  });
</script>

备注：

1.wujie支持hash路由和history路由，示例为hash路由模式，切换histrory模式只需要去除serverUrl里面的#/即可；

2.子应用的antd select组件会有下拉框位置异常的问题，wujie官方文档常见问题有说明，可参照处理；无界 | 无界