微前端、微应用

作为单独项目开始

yarn serve

接入主服务

将下面的路由接入主服务中：

import { RouteView } from '@/layouts'
// 测试微前端
export default {
  path: '/testMicro/index',
  component: RouteView,
  name: 'testMicro',
  redirect: '/testMicro',
  meta: { title: '测试微前端', keepAlive: false },
  children: [
    {
      path: '/testMicro',
      name: 'testMicroHome',
      meta: { title: '测试微前端home', keepAlive: true, icon: 'home', hiddenHeaderContent: true }
    },
    {
      path: '/testMicro/about',
      name: 'testMicroAbout',
      meta: { title: '测试微前端about', keepAlive: true, icon: 'home', hiddenHeaderContent: true }
    },
  ]
}

在<route-view />内容块中以下面代码代替：

<transition-group name="page-transition">
  <!-- <route-view /> -->
  <route-view :key="'main'" />
  <!-- 子应用渲染区，用于挂载子应用节点 -->
  <section :key="'frame'" id="frame"></section>
</transition-group>

micro/apps.js:

const apps = [
  /**
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 通过该地址加载微应用
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
   */
  {
    name: 'testMicro',
    entry: '//192.168.0.87:7101',
    container: '#frame',
    activeRule: '/testMicro',
  },
]

export default apps

micro/index.js:

// 一个进度条插件
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// import { message } from "ant-design-vue";
import { registerMicroApps, initGlobalState, addGlobalUncaughtErrorHandler, start } from 'qiankun';

// 子应用注册信息
import apps from "./apps";

/**
 * 注册子应用
 * 第一个参数 - 子应用的注册信息
 * 第二个参数 - 全局生命周期钩子
 */
registerMicroApps(apps, {
  // qiankun 生命周期钩子 - 加载前
  beforeLoad: (app) => {
    // 加载子应用前，加载进度条
    NProgress.start();
    console.log("[qiankun]: registerMicroApps beforeLoad", app.name);
    return Promise.resolve();
  },
  // qiankun 生命周期钩子 - 挂载后
  afterMount: (app) => {
    // 加载子应用前，进度条加载完成
    NProgress.done();
    console.log("[qiankun]: registerMicroApps afterMount", app.name);
    return Promise.resolve();
  },
});

/**
 * 添加全局的未捕获异常处理器
 */
addGlobalUncaughtErrorHandler((event) => {
  console.error(event);
  // 加载失败时提示
  // if (event.message && event.message.includes("died in status")) {
  //   message.error("[qiankun]: 子应用加载失败，请检查应用是否可运行");
  // }
});

// 初始化 state
const actions = initGlobalState({
  token: JSON.parse(localStorage.getItem('pro__Access-Token') || '{}') || {}
});

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log("[qiankun]: onGlobalStateChange ", state, prev);
});
// actions.setGlobalState({
//   token: JSON.parse(localStorage.getItem('pro__Access-Token') || '{}') || {}
// });
actions.offGlobalStateChange();

// 导出 qiankun 的启动函数
export default start;

main.js:

import startQiankun from './micro';

startQiankun();

编译

yarn build