前端微服务qiankun基本使用

qiankun

主应用配置

1. 安装 yarn add qiankun # 或者 npm i qiankun -S
2. 在入口文件 src/main.ts 下注册微应用并启动：

// 在入口文件src/main.ts下注册微应用并启动：
import { registerMicroApps, start } from "qiankun";
registerMicroApps([
  {
    name: "qiankunVue",
    entry: "//localhost:8080", //子应用的启动端口修改为8080，基座使用80，不要相同
    container: "#qiankunVue", //加载子应用的容器
    activeRule: "/qiankunVue", //路由匹配规则
  },
]);
// 启动 qiankun
start();

3. 在你要放置子应用的位置增加一个容器用于加载子应用

微应用配置

1. 无需安装依赖
2. 导出三个声明周期函数 bootstrap、mount、unmount

export async function bootstrap() {
  console.log("vue app bootstraped");
}
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log("vue mount", props);
  render(props);
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  console.log("vue unmount");
  instance.$destroy();
  instance = null;
  router = null;
}
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log("update props", props);
}

3. 在 mounted 声明周期函数中加载微应用

function render(props) {
  //挂载应用
  const { container } = props;
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}
// 独立运行时，直接挂载应用
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

4. 更改微应用路由基础路径与主应用中 activeRule 同名

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

5. 更改 webpack 的配置

const path = require("path");

module.exports = {
  devServer: {
    // 监听端口
    port: 8081,
    // 关闭主机检查，使微应用可以被 fetch
    historyApiFallback: true,
    // 配置跨域请求头，解决开发环境的跨域问题
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: "qiankunVue",
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: "umd",
      // 按需加载相关，设置为 webpackJsonp_MicroAppOrde 即可
      //jsonpFunction: `webpackJsonp_sub-app1`,
    },
  },
};

6. 修改运行时的 public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。

//在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}