qiankun微服务使用流程

一、创建基座（主服务）

二、创建微服务

三、主服务main.js配置

// 引入qiankun
import { registerMicroApps, start } from "qiankun";
registerMicroApps([
  {
    name: "vueApp", // 应用的名字
    entry: "//localhost:3001", // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
    container: "#container", // 容器id
    activeRule: "/app/vue", // 根据路由 激活的路径
  },
  {
    name: "reactApp",
    entry: "//localhost:20000",
    container: "#container",
    activeRule: "/app/react",
  },
]);
start();

四、微服务main.js配置

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// Vue.config.productionTip = false

let instance = null;
function render(props) {
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount("#qkApp"); // 这里是挂载到自己的html中  基座会拿到这个挂载后的html 将其插入进去
}

if (window.__POWERED_BY_QIANKUN__) {
  // 动态添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) {
  // 默认独立运行
  render();
}

// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
export async function bootstrap(props) {}

export async function mount(props) {
  render(props);
}

export async function unmount(props) {
  instance.$destroy();
}

五、如果需要配置多个微服务需要修改每个微服务的router.js中的base

六、微服务配置vue.config.js文件

module.exports = {
  lintOnSave: false, // 关闭eslint检测
  devServer: {
    port: 3001, //这里的端口是必须和父应用配置的子应用端口一致
    headers: {
      //因为qiankun内部请求都是fetch来请求资源，所以子应用必须允许跨域
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      //资源打包路径
      library: "vueApp",
      libraryTarget: "umd",
    },
  },
};