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

记录一次无界微前端使用

无界微前端

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。

相关推荐
牧羊狼的狼10 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手12 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲12 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell12 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮14 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel14 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip15 小时前
JavaScript事件流
前端·javascript
赵得C15 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG15 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042715 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js