微前端阿里qiankun、京东micro-app、腾讯wujie配置父子应用

一：阿里qiankun

基于 single-spa，采用了微前端的技术方案，通过主应用来管理和加载多个子应用。主应用和子应用之间通过自定义协议通信，实现了跨应用的状态共享。

1、主main.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: '子应用名称',
    entry: '子应用入口URL',
    container: '#子应用挂载容器',
    activeRule: '/子应用路由前缀',
  },
  // 可以添加更多子应用
]);

start();

2、子main.js

import { createApp } from 'vue';
import App from './App.vue';

let app = null;

function render() {
  app = createApp(App);
  app.mount('#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  // 子应用启动前的操作
}

export async function mount(props) {
  // 子应用挂载前的操作
  render();
}

export async function unmount() {
  // 子应用卸载前的操作
  app.unmount();
  app = null;
}

3、子package.json

{
  "name": "sub-app",
  "version": "1.0.0",
  "qiankun": {
    "master": {
      "defer": true
    }
  }
}

　　

二、京东micro-app和腾讯wujie

基于 Web Components 技术实现，wujie为轻量级的微前端框架，micro-app为相对完整的微前端解决方案，提供了更多的功能和生态支持，如状态管理、路由管理等。

使用方法一致，替换库即可

1、主mian.js

import { createApp } from 'micro-app';
import App from './App.vue';

createApp(App).start();

2、子main.js

import { createApp } from 'micro-app';
import App from './App.vue';

createApp(App).start();

3、子package.js

{
  "name": "sub-app",
  "version": "1.0.0",
  "micro-app": {
    "type": "sub-app"
  }
}