# wujie-demo

**Repository Path**: sk20020228/wujie-demo

## Basic Information

- **Project Name**: wujie-demo
- **Description**: 无界微前端示例代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-13
- **Last Updated**: 2025-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 无界微前端

> 无界微前端示例代码
> lord-app（主应用）、sub-app（子应用）

官网文档：https://wujie-micro.github.io/doc/



## 主应用

### 安装依赖

```bash
npm i wujie-vue3 -S
```



### 在主应用中注册无界

```typescript
import WujieVue from "wujie-vue3";

app.use(WujieVue); // 注册无界组件
```



### 在组件中使用 WujieVue

> views/SubApp.vue

```vue
<template>
  <WujieVue
    width="100%"
    height="100%"
    name="sub-app"
    :url="subAppUrl"
    :sync="true"
    :props="subProps"
    @before-load="beforeLoad"
    @after-mount="afterMount"></WujieVue>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 主应用地址
const subAppUrl = ref("http://localhost:5174");
// 传给子应用的数据
const subProps = ref({
  baseUrl: "/subApp",
  token: "Bearer 1234567890",
});
// 子应用加载前
const beforeLoad = () => {
  console.log("子应用加载前");
};
// 子应用加载完成
const afterMount = () => {
  console.log("子应用挂载完成");
};
</script>

<style scoped></style>
```



需要在路由中增加一个

```javascript
{
	path: "/subApp",
  name: "subApp",
  component: () => import("@/views/SubApp.vue"),
},
```



## 子应用

> 子应用需要改造一点内容

### 改造main.ts

> 需要根据__POWERED_BY_WUJIE__判断环境，抽离出了渲染执行的函数

```typescript
import "./assets/main.css";

import { createApp } from "vue";
import App from "./App.vue";
import { createRouterInstance } from "./router";

let app: ReturnType<typeof createApp>;
const render = (props: any = {}) => {
  let { container, baseUrl } = props;
  app = createApp(App);
  app.use(createRouterInstance(baseUrl || "/"));
  app.mount(container ? container.querySelector("#app") : "#app");
};

// 判断是否运行在无界环境中
if ((window as any).__POWERED_BY_WUJIE__) {
  // 声明 mount 函数，供无界在适当时机调用
  (window as any).__WUJIE_MOUNT = () => {
    const props = (window as any).$wujie?.props;
    render(props);
  };
  // 声明 unmount 函数，供无界在适当时机调用
  (window as any).__WUJIE_UNMOUNT = () => {
    app?.unmount();
  };
} else {
  // 正常启动
  render();
}
```



### 改造路由

> 需要给路由加上前缀

```typescript
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

let routerInstance: ReturnType<typeof createRouter> | null = null;
// 获取路由示例
export function getRouter() {
  if (!routerInstance) {
    throw new Error("[Router] 路由实例未初始化！请在 main.ts 中先调用 createRouterInstance()");
  }
  return routerInstance;
}

// 工厂函数
export function createRouterInstance(basePath: string = "/") {
  // 单例模式：防止重复创建
  if (routerInstance) {
    console.warn("[Router] 路由实例已存在，返回现有实例");
    return routerInstance;
  }

  const router = createRouter({
    history: createWebHistory(basePath),
    routes: [
      {
        path: "/",
        name: "home",
        component: HomeView,
      },
      {
        path: "/about",
        name: "about",
        // route level code-splitting
        // this generates a separate chunk (About.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import("../views/AboutView.vue"),
      },
    ],
  });

  // 注册守卫

  // 缓存实例
  routerInstance = router;
  return router;
}
```



### 改造vite.config.ts

> 本地调试需要开启cors或者headers请求头Access-Control-Allow-Origin改成*
>
> 后续发布到正式服务器还是得设置这种

```typescript
server: {
  cors: true,
  headers: {
  	"Access-Control-Allow-Origin": "*",
  },
},
```



## 注意点

- 关闭浏览器的`Vue.js devtools`

  - 如果没有关闭会出现报错，Vue DevTools 在多应用环境下重复定义全局钩子

    ```
    Uncaught TypeError: Cannot redefine property: __VUE_DEVTOOLS_GLOBAL_HOOK__
        at Object.defineProperty (<anonymous>)
        at detectIframeApp (<anonymous>:33:10)
        at <anonymous>:69:3
    ```