第一步:安装 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 [email protected]
* @Date: 2023-01-09 10:53:18
* @LastEditors: CAIPENG\CaiPeng [email protected]
* @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的配置。