vue3 (三) qiankun+子应用（主应用）

今天又是抓狂的一天，被qiankun折磨疯了。
结论就是基座可以vue3.0 + vue3.0微应用是ok的。
基座可以vue2.0 + vue3.0 微应用是ok的。
基座如果是vue3.0+ vue2.0微应用是不ok的。

这里介绍vue3.0 + vue3.0微应用的列子代码
第一步：配置migo
在这里插入图片描述
apps.ts的内容

// 服务配置信息
import config from "@/config";

const {
  VUE_APP_ROCKET_SHOW, //开发界面展示
  VUE_APP_DEV_APP, //开发
  VUE_APP_MOBILE_MG, //移动管理
  VUE_APP_XM_MILKYWAY_PC_REACT_VIEWER,
} = config;

const apps = [ 
  {
    name: "GoAppRocketShow",
    entry: VUE_APP_ROCKET_SHOW,
    container: "#frame",
    activeRule: "/go-app-rocket-show",
  }, 
  {
    name: "GoAppDevApp",
    entry: VUE_APP_DEV_APP,
    container: "#frame",
    activeRule: "/go-app-dev",
  }, 
  {
    name: "GoMobileApp",
    entry: VUE_APP_MOBILE_MG,
    container: "#frame",
    activeRule: "/xm-mobile-mg",
  }, 
  {
    name: "XmMilkywayPcReactViewer",
    entry: VUE_APP_XM_MILKYWAY_PC_REACT_VIEWER,
    container: "#frame",
    activeRule: "/xm-milkyway-pc-react-viewer",
  },
];

// 判断当前请求地址 是否为子应用地址
export function hasSubApp(apps: any, href: any) {
  const hrefAry = href.split("/");
  const subName = hrefAry[3];
  if (subName != null && subName.length > 0) {
    const filterAry = apps.filter((itemObj: any) => {
      return itemObj.activeRule === "/" + subName;
    });
    if (filterAry.length > 0) {
      return true;
    }
  }
  return false;
}

export default apps;

index.ts 的内容

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

import {
  registerMicroApps,
  addGlobalUncaughtErrorHandler,
  start,
} from "qiankun";

// 子应用注册信息
import apps from "./apps";
import GoingUtils from "@/utils/goingUtils";

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

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

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

config/index.ts的内容

type Config = {
  VUE_APP_DEV_APP: string; // 开发
  VUE_APP_ROCKET_SHOW: string; // 开发展示界面
  VUE_APP_MOBILE_MG: string; // 移动管理
  VUE_APP_XM_MILKYWAY_PC_REACT_VIEWER: string; // lowcode-engine 渲染器
};

const config: Config = {
  VUE_APP_XM_MILKYWAY_PC_REACT_VIEWER:process.env.VUE_APP_XM_MILKYWAY_PC_REACT_VIEWER,
  VUE_APP_ROCKET_SHOW: process.env.VUE_APP_ROCKET_SHOW, // 开发展示界面
  VUE_APP_DEV_APP: process.env.VUE_APP_DEV_APP, // 开发
  VUE_APP_MOBILE_MG: process.env.VUE_APP_MOBILE_MG,
};

// 导出当前环境的配置，默认为 dev 环境
export default config;

第二步：在main.ts加载乾坤

import startQiankun from './migo';
// 启动乾坤
startQiankun()

第三步：修改router的请求方式

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

到此主应用配置完成

vue3 (三) qiankun+子应用（主应用）

猜你喜欢