微前端（三）go-app-main的实现

go-app-main是微前端的主体框架，go-app-main会扩展qiankun，go-app-main负责菜单、门户的管理。
在此以华为云的一个界面来做demo

左边菜单对应相应的子应用菜单。

main.ts的配置重点：

上核心配置：

import Vue from "vue";
import VueRouter from "vue-router";

// @ts-ignore
import App from "./App.vue";
import routes from "./routes";
//注册乾坤
import startQiankun from "./migo";

import '@/assets/less/index.less';

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
//用于应用之间通讯使用
import actions from "@/shared/actions";

Vue.use(ViewUI);

Vue.use(VueRouter);
Vue.config.productionTip = false;


//启动乾坤
startQiankun();

// 将action对象绑到Vue原型上，为了项目中其他地方使用方便
Vue.prototype.$actions = actions;

/**
 * 注册路由实例
 * 即将开始监听 location 变化，触发路由规则
 */
const router = new VueRouter({
  mode: "history",
  routes,
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#main-app");

import startQiankun from “./migo”;
这里是使用qiankun的配置信息

// 一个进度条插件
import NProgress from "nprogress";
import "nprogress/nprogress.css";

import { message } from "ant-design-vue";
import {
  registerMicroApps,
  addGlobalUncaughtErrorHandler,
  start,
} from "qiankun";

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

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

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

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

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

//服务配置信息
// @ts-ignore
import config from "@/config";
import router from '@/routes/index';


const {
  VUE_GO_PROCESS_APP,
  STATIC_MICRO_APP,
  VUE_GO_GROUP_ADMIN,
  VUE_GO_SYSTEM,
  VUE_OA_SYSTEM,
} = config;

const apps = [
  /**
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 通过该地址加载微应用，这里我们使用 config 配置
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
   */
  {
    name: "GoProcessApp",
    entry: '//localhost:10200',
    container: "#frame",
    activeRule: "/process",
  },
  /**
   * 报表系统组件
   */
  {
    name: "GoReportApp",
    entry: '//localhost:10233',
    container: "#frame",
    activeRule: "/report",
    props: {
      routeBasePath: '/sub-login',
      mainRouter: router,
    },
  },
  /**
   * 大屏系统组件
   */
  {
    name: "GoScreenApp",
    entry: '//localhost:10255',
    container: "#frame",
    activeRule: "/screen",
    props: {
      routeBasePath: '/sub-login',
      mainRouter: router,
    },
  },
  /**
   * 静态系统组件
   */
  {
    name: "StaticMicroApp",
    entry: STATIC_MICRO_APP,
    container: "#frame",
    activeRule: "/static",
  },
];

export default apps;

到此就完成了主框架项目的配置，没有太多需要注意的，基本就是改造main.ts，然后加上上面提供的2个配置文件即可。

下节将子应用的配置说明。