qiankun微前端的使用

qiankun使用时注意以下几个点

1，子应用项目框架（react，vue）使用的打包格式需要为 umd 格式

2，子应用项目最好配置不受同源策略（跨域）的影响

3，子应用最好使用的路由模式是 history 模式

4，子应用最好使用的是 webpack 打包，目前 qiankun 对 vite 的支持不是很好

例如在 vue2 项目中的配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置端口，在主应用中注册的时候需要，以及配置防止跨域
  devServer: {
    port:7500,
    headers:{
      'Access-Control-Allow-Origin':'*'
    }
  },
  // 配置打包格式
  configureWebpack: {
    output: {
      library: 'm-vue',
      libraryTarget: 'umd',
    }
  }
})

然后下面来说一下怎么使用，我已经上传代码，代码地址为 GitCode - 全球开发者的开源社区,开源代码托管平台

在子应用中需要导出三个生命周期钩子函数，分别是

加载 export async function bootstrap

挂载 export async function mount

卸载 export async function unmount

以上三个钩子函数可以收到 主应用 传递过来的参数 props，然后再在子应用中通过 window.__POWERED_BY_QIANKUN__ 判断一下当前的环境，如果是在 qiankun（主应用） 环境下该怎么渲染，不在 qiankun（自己单独） 环境下怎么渲染

例如在 vue2 子应用中的 main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

let app;
function render(props){
  const { container } = props;
  app = new Vue({
    render: h => h(App),
  })
  // 如果是qiankun环境，就挂载到主应用中的container上，否则挂载到#app上
  app.$mount(container ? container.querySelector('#app') :'#app')
}

// 判断是否是qiankun环境
if(!window.__POWERED_BY_QIANKUN__){
  render({})
}


export async function bootstrap(props){
  console.log(props,'vue bootstrap');
  props.test && Vue.component('test', props.test);
}

export async function mount(props){
  render(props)
  console.log(props,'vue mount');
}

export async function unmount(){
  console.log('vue unmount');
  app.$destroy();
}

在主应用中需要进行使用qiankun进行注册需要加载的子应用，并准备一个容器用于子应用的加载，还有路由的切换，因为qiankun就是监视路由来进行响应的

我在主应用中组成的代码 registerApp.js ：

以下代码表示，当在主应用中进行路由切换，路由为  /vue2 的时候，会进行加载 localhost:7500 的应用，并把他挂载到主应用的 container 容器上面

import { registerMicroApps, start  } from 'qiankun';
import test from './components/test.vue'

// 注册
registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:7500',
    container: '#container',
    activeRule: '/vue2',
    props: {
      test: test,
    },
  },
]);

// 开启
start();