qiankun使用

1.安装qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2.主应用配置

1.main.js配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuex from 'vuex';
createApp(App).use(store).use(router).mount('#base')
import { registerMicroApps, start } from 'qiankun';
// 注册应用
registerMicroApps([
  {
    name: 'vueApp', // 子应用名字
    entry: '//localhost:9000',
    container: '#container', //挂在id
    activeRule: '/vue-app',//匹配规则
    props: { data : { store } } //传参--把主应用中store数据通过props中传递下去。在子应用中的生命周期mount中可以取到；
  }
]);
// 启动 qiankun
start();

2.router.js配置

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
var routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: function () { return import(/* webpackChunkName: "about" */ '../views/About.vue'); }
    }
];
var router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes: routes
});
export default router;

3.App.vue配置

<template>
  <div>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/vue-app/">vue</router-link>
    </div>
    <router-view />
    <div id="container"></div>
	<!-- container 要与 registerMicroApps中的container对应上-->
  </div>
</template>

主应用配置完毕。

3.子应用配置

1.main.ts配置

import { createApp } from "vue";
import App from "./App.vue";
import { createRouter, createWebHistory } from "vue-router";
import routes from "./router";
import store from "./store";

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__?: string;
  }
}
let history = null;
let router = null;
let app = null;
function render(props: any) {
  const { container } = props;
  history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/vue-app/" : "/");
  router = createRouter({
    history,
    routes,
  });
  app = createApp(App)
    .use(router)
    .use(store)
    .mount(container ? container.querySelector("#app") : "#app");
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}
export async function bootstrap() {
  console.log("bootstrap");
}
export async function mount(props: any) {
  render(props);
}
export async function unmount() {
  history = null;
  app = null;
  router = null;
}

2.router.ts配置

import { RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
export default routes

3.vue.config配置

module.exports = {
    publicPath: '//localhost:9000',
    devServer: {
        port: 9000,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    configureWebpack: {
        output: {
            libraryTarget: 'umd',
            library: 'vue-app'
        }
    }
}

子应用配置完毕。