vue3+ Micro App (二)

第一步：安装 npm i @micro-zoe/micro-app --save

第二步：main里面导入microApp

import microApp from '@micro-zoe/micro-app';
import {getDefConfigs} from "@/utils/microAppUtils";

microAppUtils里面定义了部分全局配置

import GoingUtils from "/@/utils/goingUtils";

export function getDefConfigs(){
    return {
        lifeCycles: {
            created () {
                GoingUtils.showLoading();
                console.log('created')
            },
            beforemount () {
                console.log('beforemount')
            },
            mounted () {
                GoingUtils.closeLoading();
                console.log('mounted')
            },
            unmount () {
                console.log('unmount')
            },
            error () {
                console.log('error')
            }
        }
    }
}

第三步：加载microApp,preFetchApps配置预加载信息

if (import.meta.env.PROD) {
    microApp.start({...getDefConfigs(),...preFetchApps });
  } else {
    microApp.start(
      {...getDefConfigs()}
    )
  }

第四步：定义appSub的路由配置

import subApp from "/@/router/subApp";
export const basicRoutes = [
  ...subApp,
];

subApp/index.vue 的内容

第五步：到.env种添加对应的运行端口
开发环境配置端口

VITE_APP_RUNING_EXTEND=3333

第六步：则对子应用进行配置
定义public-path.ts

if (window.__POWERED_BY_QIANKUN__) {
  // 动态设置 webpack publicPath，防止资源加载出错
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

/* eslint-disable no-undef */
if (window.__MICRO_APP_ENVIRONMENT__) {
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

第七步：配置子应用的路由

export function setupRouter(app: App) {
    //如果是采用京东的微前端
    if(window.__MICRO_APP_BASE_ROUTE__){
        history = createWebHistory(
            window.__MICRO_APP_BASE_ROUTE__ || '/'
        );
    }else {
        history = createWebHistory(
            window.__POWERED_BY_QIANKUN__ ? "/xm-runing-extend" : "/"
        );
    }
    router = createRouter({
        history,
        routes: routes,
    });

    app.use(router);
}

到此就完成了Micro App 和 sub App的配置。