qiankun框架中嵌入一个html页面

Question

在qiankun框架中嵌入一个html页面如何实现，请教各位！

Answer 1

在qiankun框架中嵌入一个HTML页面，可以通过以下步骤实现：

在主应用中安装@qiankun/vue或@qiankun/react等相关的qiankun子应用管理工具。
创建一个子应用，可以是Vue、React、Angular等应用，该子应用包含需要嵌入的HTML页面。
在主应用的registerMicroApps方法中注册该子应用，可以设置子应用的name、entry、container等属性。例如：

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'subapp',
    entry: '//localhost:8080',
    container: '#subapp-container',
    activeRule: '/subapp',
  },
]);
start();

在主应用的页面中，使用

等标签来创建一个容器，设置id为subapp-container，该容器将用于嵌入子应用的HTML页面。例如：

<div id="subapp-container"></div>

在子应用中，需要将HTML页面作为子应用的一个路由，通过Vue Router、React Router等实现。例如：

import Vue from 'vue';
import Router from 'vue-router';
import App from './App.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: App,
    },
    {
      path: '/html',
      name: 'html',
      component: () => import('./views/Html.vue'),
    },
  ],
});

export default router;

在上面的代码中，Html.vue就是需要嵌入的HTML页面。

启动应用程序，并访问主应用的页面，可以看到子应用的HTML页面已经嵌入到了主应用的页面中。
希望这些步骤能够帮助您在qiankun框架中嵌入HTML页面。