使用qiankun整合项目记录

qiankun：点击这里

解决问题：将多个系统或者不同技术框架项目可以整合到一起，以前使用iframe方案

这里的使用的是国内目前比较成熟的qiankun

准备工作: 3个应用

基座：主应用(main-app)，使用vue-cli3配合vue2搭建
子应用1：vue-app，使用vue-cli3配合vue2搭建
子应用2：react-app，使用cra

子应用路由模式是history

1、将基座搭建好之后，开始引入qiankun，注册微应用，

这里我将微应用加载在某一个页面中，所以不在main.j始终调用start函数

新建一个qiankun.config.js配置注册的微应用

const state = {
    user: 'tom' } // 用来传递给子应用

export default [{
   
  name: 'reactApp',
  entry: '//localhost:3000',
  container: '#container',
  activeRule: '/portal/react-app'
},
{
   
  name: 'vueApp',
  entry: '//localhost:7200',
  container: '#container',
  activeRule: '/portal/vue-app',
  props: state,  // 使用props传递参数
}]

main.js中引入qiankun.config.js并且注册

import {
    registerMicroApps, initGlobalState } from 'qiankun'
import APPS from '../config/qiankun.config.js'

registerMicroApps(APPS, {
   
  beforeLoad: (app) => console.log('before load', app.name), // 生命周期
  beforeMount: [
    app => {
   
      console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
    },
  ]
});

在/src/views中新建Index.vue，我们要在这里加载微应用

<template>
  <!-- 微应用容器 -->
  <div id='container'></div>
</template>

<script>