wujie无界微前端框架初使用

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

1.主系统下载wujie

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

复制代码
npm i wujie-vue3 -S

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

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

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

javascript 复制代码
// 导入 WuJie.js 的 Vue3 集成
import WujieVue from "wujie-vue3";
const { bus, setupApp, preloadApp, destroyApp } = WujieVue;
 // 配置子系统入口
setupApp({
  name: 'sub-app',
  url: 'http://localhost:8081', // 子应用的 URL
  attrs: {
    src: 'http://localhost:8081',
  },
});

const app = createApp(App)
app.use(WujieVue);
app.mount('#app')

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

router.js文件

新建页面路径

4.pre.vue页面代码

html 复制代码
<template>
  <div class="pre">
    <WujieVue
      width="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要一样,开启允许跨域

javascript 复制代码
server: {
      cors: true, // 允许跨域
      port: 8081,
      // host: true,
      host: '0.0.0.0', // 确保可以通过 IP 访问
      origin: 'http://localhost:8081', // 子应用的访问地址(与主应用匹配)对应appUrl
      open: 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/, '')
        }
      }
    },

done

相关推荐
我想说一句11 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
lichenyang45321 小时前
React移动端开发项目优化
前端·react.js·前端框架
当牛作馬1 天前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
Codebee1 天前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
我命由我123451 天前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
扶我起来还能学_1 天前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
沐森1 天前
桌面右键功能开发
前端框架·操作系统
默默地离开1 天前
React自定义 Hooks 不用死磕,轻松拿捏也能站上技术金字塔尖!
前端·react.js·前端框架
知识分享小能手2 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
前端小趴菜052 天前
react状态管理库 - zustand
前端·react.js·前端框架