創建兩個項目作為實現demo，一個為主應用，一個為子應用

主應用

安裝 qiankun:

yarn add qiankun 
 或者 
npm i qiankun -S

使用qiankun：

1. 在 utils 內創建 微應用文件夾 microApp,同時在該文件夾內創建微應用出口文件 index.js,路由文件 microAppRouter,配置函數文件 microAppSetting。

   
   
   microApp文件
   
   

   2.路由文件 microAppRouter

// 微應用路由
const microAppRouter = [
  {
    name: "child", //用于應用名   容器id   應用路由基地址
    url: "http://localhost:10002", //應用路徑（ip與端口）
    props: { propsName: "主應用傳遞過來的數據" }, //初始化時需要傳遞給微應用的數據
    // hidden: false,//是否啟用該應用，默認false
    menuName: "子應用",//自定義屬性 根據需要自己配置（用在了菜單導航的名稱）
  },
];
export default microAppRouter;

3.配置函數文件 microAppSetting

// 引入路由
import $microAppRouter from "./microAppRouter";
// 微應用配置
const microAppSetting = {};
export default microAppSetting;
/**
 * @description: 配置子應用
 * @param {*}
 * @return {*}
 */
microAppSetting.microApps = () => {
  let apps = [];
  $microAppRouter.map((item) => {
    if (!item.hidden) {
      apps.push({
        name: item.name, //應用名(不可重復)
        entry: item.url, //默認加載應用路徑(ip與端口)
        container: `#${item.name}`, //容器id
        activeRule: `/${item.name}`, //激活該應用的路徑（子應用路由基地址）
        ...item,
      });
    }
  }); 
  return apps;
};

4.微應用出口文件 index.js

// 引入 qiankun  應用注冊函數   開啟函數
import { registerMicroApps, start } from "qiankun";
// 引入 微應用配置文件
import $microAppSetting from "./microAppSetting";
//注冊子應用
registerMicroApps($microAppSetting.microApps());
//開啟
start();

5.在App.vue內配置微應用容器及跳轉菜單

<template>
  <!-- 主應用dom id 不能與子應用dom id 重復  -->
  <div id="fapp">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :router="true"
    >
      <!-- 主應用 -->
      <el-menu-item index="/">主應用</el-menu-item>
      <!-- 子應用 -->
      <el-menu-item
        v-for="item in microAppDom_Router"
        :key="item.name"
        :index="`/${item.name}`"
        >{{ item.menuName }}</el-menu-item
      >
    </el-menu>
    <!-- 主應用路由出口 -->
    <router-view></router-view>
    <!-- 微應用dom容器 -->
    <div
      v-for="item in microAppDom_Router"
      :key="item.name"
      class="microAppBox"
      :id="item.name"
    ></div>
  </div>
</template>
<script>
// 引入子應用路由
import $microAppRouter from "@/utils/microApp/microAppRouter";
export default {
  name: "Home",
  data() {
    return {
      // 默認路由
      activeIndex: "/",
      // 微應用容器及路由list
      microAppDom_Router: $microAppRouter,
    };
  },
  created() {},
};
</script>

6.在main.js文件內引入微應用出口文件 index.js

// 引入微應用文件
import "./utils/microApp/index.js";

7.運行后展示

主應用菜單展示效果

8.在配置完子應用后的主應用展示
點擊子應用菜單

點擊子應用菜單展示效果

子應用

1.修改子應用路由文件內路由實例屬性： base 為 "/child"

const router = new VueRouter({
  mode: "history",
  base: "/child",
  routes,
});

2.在main.js文件內導出生命周期鉤子

// vue實例變量
let instance = null;
// render 函數
function render(props) {
  if (props) { 
    console.log(props);
  }
  // 創建vue實例
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app");
}
// 是否使用了qiankun
if (window.__POWERED_BY_QIANKUN__) {
  // 路徑動態配置
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
  // 未使用qiankun 調用render 函數創建vue
  render();
}

/**
 * bootstrap 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鉤子，不會再重復觸發 bootstrap。
 * 通常我們可以在這里做一些全局變量的初始化，比如不會在 unmount 階段被銷毀的應用級別的緩存等。
 */
export async function bootstrap(props) {
  console.log(props);
}
/**
 * 應用每次進入都會調用 mount 方法，通常我們在這里觸發應用的渲染方法
 */
export async function mount(props) {
  render(props);
}
/**
 * 應用每次 切出/卸載 會調用的方法，通常在這里我們會卸載微應用的應用實例
 */
export async function unmount(props) {
  console.log(props);
  instance.$destroy();
}

/**
 * 可選生命周期鉤子，僅使用 loadMicroApp（手動加載微應用） 方式加載微應用時生效
 */
export async function update(props) {
  console.log("update props", props);
}

3.配置Webpack、跨域與端口號
在vue.config.js內添加：

const packageName = require("./package.json").name;
module.exports = {
  // 服務配置
  devServer: {
    port: 10002, //端口號
    //   允許跨域
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  // webpack 配置
  configureWebpack: {
    output: {
      library: `${packageName}-child`,
      libraryTarget: "umd",
    },
或
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
  },
};

4.運行后展示

子應用展示效果

module.exports = {
  globals: {
    __webpack_public_path__: "writable",
  },
};

package.json

{
  "eslintConfig": {
    "globals": {
      "__webpack_public_path__": true
    }
  }
}

通信