qiankun框架

乾坤官方文档

主应用

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { registerMicroApps, start } from 'qiankun';

const app = createApp(App);

app.use(/* your plugins here */);

// 注册微应用
registerMicroApps([
  {
    name: 'TESTApp', // 名称
    entry: '//localhost:8081', // 入口地址
    container: '#sub-app-1', // 微应用挂载节点（domId）
    activeRule: '/app/works', // 微应用触发的路由
  },
]);

// 启动乾坤
start();

app.mount('#app');

微应用

// vite.config.ts
// 安装 yarn add vite-plugin-qiankun

import qiankun from 'vite-plugin-qiankun'
plugins: [
  qiankun('TESTApp', {
    useDevMode: true
  }),
]

// main.ts
// 使用乾坤框架进行渲染
// 挂载函数
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
async function render(props: any) {
  const { container } = props;
  app.component('i-icon', IconFont)
  const router = createRouter({
    history: createWebHistory((qiankunWindow as any).__POWERED_BY_QIANKUN__ ? "/app/works" : "/"),
    routes
  });
  // routerBeforeEach(router); // 路由守卫
  app
    .use(router)
    .use(useTable)
    .use(createPinia())
  app.mount(container ? container.querySelector('#app') : '#app');
}

renderWithQiankun({
  mount(props) {
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount() {
    console.log('unmount');
    app.unmount();
  },
  update() {
    console.log('update');
  },
});

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