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

ゞ浴缸里的玫瑰 2022-09-10 06:18 38阅读 0赞

go-app-main是微前端的主体框架，go-app-main会扩展qiankun，go-app-main负责菜单、门户的管理。  
在此以华为云的一个界面来做demo  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16]  
左边菜单对应相应的子应用菜单。

main.ts的配置重点：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 1]

上核心配置：

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”;

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 2]

//服务配置信息
    // @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个配置文件即可。

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/5a51a79b3b1d4dbeb6fad4e7e603f707.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/e16d025b1b674e0d86961bd4786df271.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/7e69fdf55cca4c8a94b0d6ec3a975929.png