改造主应用

引入 qiankun

详细步骤见 官方文档

提供子应用容器

在app.vue内添加一个元素作为微应用统一的容器

如

<template>
    <div id="app">
        <router-view />
        <div id="sub-container"></div>
    </div>
</template>

注册微应用

• 新建 micro.js 文件:

import {registerMicroApps, start} from 'qiankun';

const microMenu = [
    {
        // name 用于缓存，每个子应用 name 不能相同, 且name需和子应用打包的 library 值一致
        name: 'micro-app-name',
        // 子应用的可访问地址
        entry: 'http://localhost:8000',
        // 匹配规则，当路由以 activeRule 开头，加载对应子应用
        // 有 # 是因为使用的是 hash 模式
        // history 模式以 / 开头
        activeRule: '/#/micro-app'
    }]


// 生命周期处理
const lifeCycles = {
    beforeLoad: (app) => {
        return Promise.resolve(app)
    },
    beforeMount: (app) => {
        return Promise.resolve(app)
    },
    afterMount: (app) => {
        return Promise.resolve(app)
    }
}
// 子应用处理
const normalizeMicroApp = (apps = []) => {
    return apps.map((app) => ({
        container: '#sub-container',
        ...app
    }))
}
const register = () => registerMicroApps(normalizeMicroApp(microMenu), lifeCycles)
export default {
    register,
    start
}

• 在适当的位置调用导出的register和start函数，一般main.js里就可以

import microApp from 'micro.js'

// 函数内可以传参，一般不需要
microApp.register()
microApp.start()

配置路由

• 在router/index.js内配置微应用路由（菜单）

// path 以 activeRule 开头
// activeRule 后面的路由，即为微应用的子路由
{
    path: '/micro-app/nodeManager',
    name: 'nodeManager',
    component: Layout,
    meta: {
        title: '微应用 micro-app 的菜单名',
    },
    children: [
        {
            name: 'nodeList',
            path: '/micro-app/nodeManager/nodeList',
            meta: {
                title: '子菜单名',
            }
        }
    ]
}

子应用的代理

子应用的代理需要补上，如 devsever 或 nginx

0