wujie无界微前端框架初使用

微臣酒驾来迟2025-01-04 14:41

先说一下项目需求：将单独的四套系统的登录操作统一放在一个入口页面进行登录，所有系统都使用的是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