js qiankun

// qiankun 示例代码

// 主应用 (main app)
import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'app1', // 微应用的名称
    entry: '//localhost:7100', // 微应用的入口地址
    container: '#container', // 容器元素的选择器或 DOM 元素
    activeRule: '/app1', // 激活规则，当路径匹配时加载微应用
  },
  {
    name: 'app2',
    entry: '//localhost:7101',
    container: '#container',
    activeRule: '/app2',
  },
]);

// 启动 qiankun
start();

// 微应用 (micro app)
// 在微应用中需要暴露一个 lifeCycles 对象，包含一些生命周期钩子函数
const lifeCycles = {
  bootstrap() {
    console.log('app1 bootstraped');
  },
  mount(props) {
    console.log('app1 mount', props);
  },
  unmount() {
    console.log('app1 unmount');
  },
};

export default lifeCycles;

解释说明：

• 主应用：负责注册和管理多个微应用。通过 registerMicroApps 方法注册微应用，并指定其入口地址、容器和激活规则。
• 微应用：每个微应用需要暴露一个 lifeCycles 对象，包含 bootstrap、mount 和 unmount 等生命周期钩子函数，用于处理微应用的初始化、挂载和卸载逻辑。

如果你需要更详细的配置或其他功能，请参考 qiankun 官方文档。