# micro-app-demo

**Repository Path**: Willison_Cloud/micro-app-demo

## Basic Information

- **Project Name**: micro-app-demo
- **Description**: 使用micro-app搭建微前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-06
- **Last Updated**: 2025-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# micro-app-demo

## 简介

本项目使用京东的[micro-app](https://zeroing.jd.com/micro-app/)实现微前端，并使用[pnpm](https://pnpm.io/zh/)和 Monorepo 管理项目代码。想了解 Monorepo 可看看 [带你了解更全面的 Monorepo - 优劣、踩坑、选型](https://juejin.cn/post/7215886869199896637)这篇文章。运行环境为 node-16.8.0 + pnpm-7.32.0。

## 目录结构

```
.
├── packages
│   ├── base               // 主应用  Vite + Vue3 (history路由)
│   ├── child-vue2         // 子应用  Vue2 (history路由)
├── package.json
├── pnpm-workspace.yaml
└── pnpm-lock.yaml
```

## 开始

### 一、搭建主应用

1. 初始化项目，生成 package.json

```bash
pnpm init
```

2. 在根目录下创建一个 pnpm-workspace.yaml 文件，使用 monorepo 必须有该文件

```
packages:
  - 'packages/**'

```

3. 在根目录下创建 packages 文件夹，创建子文件夹 base 并在 base 文件夹下运行命令，安装 [Vite](https://cn.vitejs.dev/guide/) + Vue3

```bash
pnpm create vite packages-base --template vue-ts
```

4. 在根路径下运行下列命令安装相应的包给 base 主应用(在 base 路径下运行命令就不需要--filter)

```bash
pnpm i
pnpm add @micro-zoe/micro-app --filter package-base  // 安装micro-app
pnpm add vue-router --filter package-base  // 安装vue-router
```

5. 在主应用的 main.js 引用 micro-app

```bash
import microApp from '@micro-zoe/micro-app';

microApp.start();
```

6. 创建路由文件，并分配路由给子应用，参考 packages\base\src\router\index.ts

```
  {
    path: '/app-vue2/:page*',
    name: 'app-vue2',
    component: () => import('~/pages/vue2.vue'),
  }
```

```ts
// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 使用history模式
  routes,
});
```

7. 创建一个 vue2.vue 页面，嵌入子应用，参考 packages\base\src\pages\vue2.vue

```vue
<!-- 
  name(必传)：应用名称
  url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
  baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/app-vue2`
 -->
<micro-app
  name="childApp-vue2"
  url="http://localhost:5000/"
  baseroute="/main-vite/app-vue2"
></micro-app>
```

### 二、搭建子应用 Vue2

1. packages 路径下使用[vue-cli](https://cli.vuejs.org/zh/)创建 vue2 项目

```bash
npm install -g @vue/cli  // 安装全局依赖
vue create child-vue2    // 创建项目，选择相应的配置vue2、pnpm
```

**下列步骤参考[官方文档](https://zeroing.jd.com/micro-app/docs.html#/zh-cn/framework/vue?id=%e4%bd%9c%e4%b8%ba%e5%ad%90%e5%ba%94%e7%94%a8)**

2. 子应用 vue2 设置跨域支持，在 `vue.config.js `中添加配置

```js
devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
}
```

3. 设置基础路由

```js
// router/index.js
const router = new VueRouter({
  mode: 'history',
  // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes,
});
```

4. 设置 publicPath
   **步骤 1:** 在子应用 src 目录下创建名称为`public-path.js`的文件，并添加如下内容

   ```js
   // __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
   if (window.__MICRO_APP_ENVIRONMENT__) {
     // eslint-disable-next-line
     __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__;
   }
   ```

   **步骤 2:** 在子应用入口文件的`最顶部`引入`public-path.js`

   ```js
   // entry
   import './public-path';
   ```

5. 监听卸载，子应用被卸载时会接受到一个名为 unmount 的事件，在此可以进行卸载相关操作。

```js
// main.js
const app = new Vue(...)

// 监听卸载操作
window.addEventListener('unmount', function () {
  app.$destroy()
})

```

###### 参考文档

[micro-app](https://zeroing.jd.com/micro-app/)
[pnpm](https://pnpm.io/zh/)
[Vite](https://cn.vitejs.dev/guide/)
[Vue Cli](https://cli.vuejs.org/zh/)
[Vue Router](https://router.vuejs.org/zh/)