南风知我意的技术博客

一、子应用注册

上面通过 webpack 将应用绑定在对应的 window 对象中，但是主应用并不知道有这些应用存在，如何让主应用知道这些应用的存在，那么就需要每个应用在统一一个地方进行注册。

在 main/src/constant/sub.js，配置子应用列表

javascript

  export const subNavList = [
    {
      // 唯一id
      name: 'vue2',
      // 激活规则
      activeRule: '/vue2',
      // 渲染容器
      container: '#child-container',
      // 入口
      entry: '//localhost:8081'
    },
    {
      name: 'vue3',
      activeRule: '/vue3',
      container: '#child-container',
      // 入口
      entry: '//localhost:8082'
    }
  ]

在 main/src/utils/index.js 中，新建 registerApp，传入需要注册的应用列表

javascript

import { registerMicroApps } from '../../micro'

export const registerApp = (list) => {
    // 注册到微前端框架里
    registerMicroApps(list)
}

在 main/micro/index.js 中，暴露 registerMicroApps
javascript
```
export { registerMicroApps } from './start'
```

在 main/micro/start.js 中创建 registerMicroApps 方法

javascript

import { setList } from "./constant/subApps";

export const registerMicroApps = (appList) => {
  setList(appList)
}

在 main/micro/constant/subApps.js 中 存储/获取 子应用列表

javascript

let list = []
// 获取子应用列表
export const getList = () => list
// 存储子应用列表
export const setList = appList => list = appList

在 main/src/main.js 中注册

javascript

import { subNavList } from './constant/sub'
import { registerApp } from './utils'

registerApp(subNavList)

一、子应用注册 ​

一、子应用注册