Serie Micro front-end: integración de aplicaciones (qiankun + umi + vue)

Selección de proyectos de micro front-end

Aplicación principal: umi + Ant Design Sub-aplicación: vue + element

Modo de enrutamiento: aplicación principal (historial), aplicación secundaria (hash)

Configuracion basica

1. Configuración qiankun de la aplicación principal

(1) Instalar paquetes de dependencia

yarn add -D @umijs/plugin-qiankun
复制代码

(2) Registro de subaplicaciones

Hay dos formas de registrar subaplicaciones 二选一即可:

a. Configurar aplicaciones secundarias durante el tiempo de compilación del complemento

// config.js

export default: {
    qiankun: {
        master: {
            // 注册子应用信息
            apps: [
                {
                    name: 'app1',
                    entry: '//localhost:7001'
                },
                {
                    name: 'app2',
                    entry: '//localhost:7002'
                }
            ]
        }
    }
}
复制代码

b.Configurar dinámicamente sub-aplicaciones en tiempo de ejecución (abrir en src/app.ts)

// 从接口中获取子应用配置，export 出的 qiankun 变量时一个 promise
export const qiankun = fetch('/config').then(({ apps }) => ({
    // 注册子应用信息
    apps,
    lifeCycles: {
        afterMount: (props) => {
            console.log(props);
        },
    },
    // 支持更多的其他配置，详细请看这里：https://qiankun.umijs.org/zh/api/#start-opts
}));
复制代码

(3) Cargando sub-aplicaciones

Hay dos formas de cargar sub-aplicaciones 二选一即可:

a. Uso de la vinculación de rutas

Se recomienda usar este método para importar sub-aplicaciones con sus propias rutas

// config/router.config.ts
export default {
  routes: [
    // 配置子应用 reactApp 关联的路由
    {
      name: 'react子应用',
      path: '/subreact',
      microApp: 'reactApp',
    },
    // 配置子应用 vueApp 关联的路由
    {
      name: 'vue子应用',
      path: '/subvue',
      microApp: 'vueApp',
    },
  ],
};
复制代码

B. Cómo usar <MicroApp />los componentes

Se recomienda utilizar este método para importar subaplicaciones sin enrutamiento.

import { MicroApp } from 'umi'

export function MyPage() {
    return (
        <div>
            <MicroApp name="app1" />
        </div>
    )
}
复制代码

2. Configuración de qiankun de la subaplicación

(1) Archivo de entrada main.js

bootstrapLa aplicación secundaria necesita exportar tres enlaces de ciclo de declaración mounten su propio archivo de entrada unmountpara que la aplicación principal llame en el momento adecuado.

bootstrap: solo se llamará una vez cuando se inicialice la subaplicación. El gancho de montaje se llamará directamente cuando la subaplicación vuelva a entrar la próxima vez, y bootstrap no se activará repetidamente. Por lo general, podemos hacer algunas inicializaciones de variables globales aquí, como cachés de nivel de aplicación que no se destruirán en la fase de desmontaje.

mount: el método de montaje se llama cada vez que ingresa la aplicación, generalmente activamos el método de renderizado de la aplicación aquí.

desmontar: 切除/卸载el método que la aplicación llamará cada vez, generalmente aquí desmontaremos la instancia de la aplicación de la sub-aplicación.

let instance = null;
function render() {
    instance = new Vue({
        router, store, render: h => h(App)
    }).$mount('#app')
}

// 独立运行时
if(!window.__POWERED_BY_QIANKUN__) {
    render()
}

export async function bootstrap() {
    console.log('[vue] vue app bootstraped')
}

export async function mount(props) {
    console.log('[vue] props from main framework', props)
    render(props)
}

export async function unmount() {
    instance.$destroy();
    instance.$el.innerHTML = '';
    instance = null;
}
复制代码

(2) En el directorio raíz del proyecto, agregue un nuevo archivopublic-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
复制代码

(3) Se agrega el archivo de configuración vue.config.js

Además de exponer los enlaces de ciclo de vida correspondientes en el código, para que la aplicación principal identifique correctamente la información expuesta por la aplicación secundaria, la herramienta de empaquetado de la aplicación secundaria debe agregar la siguiente configuración

const port = 9528;
module.exports = {
    publicPath: process.env.ENV === 'development' ? `//localhost:${port}` : './',
    devServer: {
        port: port,
        headers: {
            // 允许跨域
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        output: {
          // 输出暴露的名称
          library: `${name}-[name]`,
          libraryTarget: 'umd', // 将微应用打包成 umd 库格式
          jsonpFunction: `webpackJsonp_${name}`
        }
    }
}
复制代码

3. Las aplicaciones principales y secundarias implementan la configuración de comunicación

(1) El proyecto umi de la aplicación principal se comunica con la sub-aplicación vue

• Nuevo archivo src => action.ts

import { initGlobalState } from 'qiankun';

const initialState = {
    // 初始化数据
    projectId: ''
};

// 初始化 state 
const actions = initGlobalState(initialState);

export default actions;
复制代码

• 在组件中使用 actions

import actions from '@/actions';

export function ProComp() {
    const onChangePro = () => {
        actions.setGlobalState({ projectId: '123' })
    };
    return <button onClick={onChangePro} >更改项目信息</button>
}
复制代码

(2) 子应用 vue 项目

使用 qiankun 官方提供的通信方式 - Actions 通信去实现

• 新建 src => actions.js 文件

function emptyAction() {
    // 设置一个 actions 实例
    // 提示当前使用的是空 Action
    console.log('Current execute action is empty!')
}

class Actions {
    // 默认值为空 Action
    actions = {
        onGlobalStateChange: emptyAction,
        setGlobalState: emptyAction
    }
    
    // 设置 actions
    setActions(actions) {
        this.actions = actions;
    }
    
    // 映射，注册观察者函数，响应 globalState 变化
    onGlobalStateChange(...args) {
        return this.actions.onGlobalStateChange(...args)
    }
    
    // 映射，设置 globalState
    setGlobalState(...args) {
        return this.actions.setGlobalState(...args)
    }
}

const actions = new Actions();
export default actions;
复制代码

• 入口文件 main.js

在 mount 生命周期里注入 actions 实例

import actions from './actions';
export async function mount(props) {
    actions.setActions(props);  // 注入 actions 实例
    render(props)
}
复制代码

• 使用范例

<template>  
  <div>  
    <div>这是子应用</div>  
    <p>接收到的消息： {{mes}}</p>  
    <button @click= "btnClick">点击向父应用发送消息</button>  
  </div>  
</template>  
<script>  
import actions from '../actions'; // 导入实例  
export default {  
  data() {  
    return {  
      mes: '',  
    }  
  },  
  mounted() {  
    actions.onGlobalStateChange((state) => { // 监听全局状态  
      this.mes = state  
    }, true);  
  },  
  methods:{  
    btnClick(){  
      actions.setGlobalState({ info: '123'}) // 改变全局状态  
    }  
  }  
}  
</script>
复制代码

子应用改造

登录逻辑改造

打通登录权限，主应用登录后，切换子应用不需要再次进行登录检验，实现免登录功能