主应用

1、yarn add qiankun

2、修改app.vue的顶级id的值，如将app改成main-app（避免跟子应用的冲突）

3、在app.vue的<router-view></router-view>后面挂载上子应用，这里的id要对应main.js中的container

4、修改main.js的配置，其中

　　a、registerMicroApps的name要对应子应用的name，这个name要跟子应用的configureWebpack.output中的library的名称对应起来

　　b、entry: '//localhost:8099', 对应的就是子应用起来的端口

　　c、container: '#vue-app',    对应的是第3点

　　d、activeRule: '/active',   对应子分组的路径

app.vue

<template>
  <div id="main-app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view> </router-view>
    <div id="vue-app"></div>
  </div>
</template>
main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'sub-app', // app name registered
    entry: '//localhost:8099',
    container: '#vue-app',
    activeRule: '/active',
  },
]);
start();
 
子应用
vue.config.js
module.exports = {
  devServer:{
    port: 8099,
    headers:{
      "Access-Control-Allow-Origin":"*"       //保证开发环境不会产生跨域问题
    }
  },
  configureWebpack:{
    output: {
      library: `sub-app`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_sub-app`,
    },
  }
  
};
 
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;
let instance = null
function render() {
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount("#app");
}

!window.__POWERED_BY_QIANKUN__&& (render())         //保证子应用能够独立运行
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log(props);
  render()
  console.log('zhlei xingma ')
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  instance.$destroy()
  instance = null
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}
 
router==>index.js    
 
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import active from "../views/active.vue"      //active组件
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  {                                                         //对应主应用注册的路径
    path:"/active",
    name:'active',
    component: active
  }
];

const router = new VueRouter({
  mode: "history",
  // base: window.__POWERED_BY_QIANKUN__ ? '/' : '',
  routes
});

export default router;
 
相应的active.vue
 
<template>
  <div>
      buyongpei
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>