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

记录一次无界微前端使用

无界微前端

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年前端老司机20 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js