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 的内容

  <!--
 * @Author: CAIPENG\CaiPeng 405532928@qq.com
 * @Date: 2023-01-09 10:53:18
 * @LastEditors: CAIPENG\CaiPeng 405532928@qq.com
 * @LastEditTime: 2023-01-12 23:48:04
 * @FilePath: \xm-control-micro-main\src\subApp\xm-mobile-mg.vue 
-->
<script setup lang="ts">
import type {
  SpinProps
} from 'ant-design-vue';

import {
  getSubAppUrl
} from './preFetchApps'

const props = defineProps<{name: string}>()

const microAppProps = computed(() => {
  const url = getSubAppUrl(props.name)
  return {
    name: props.name,
    url,
    baseroute: `/${props.name}/`
  }
})

const spinProps = ref<SpinProps>({
  spinning: false
})

function created () {
  spinProps.value.spinning = true
}

function mounted () {
  spinProps.value.spinning = false
}
</script>

<template>
  <div class="wh100b">
    <!-- <ASpin v-bind="spinProps"> -->
      <micro-app v-bind="microAppProps" @created="created" @mounted="mounted" />
    <!-- </ASpin> -->
  </div>
</template>

<style lang="less" scoped>

</style>

第五步：到.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<Element>) {
    //如果是采用京东的微前端
    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的配置。