1、什么项目适合做?
公司项目有N个系统构成一个大体积应用，代码越来越多，运行打包十几分钟以上
2、技术栈要求？
目前我说的这版是vue2为基座，子应用vue2，vue3，react都行，vite版本是单独的，自己去官网看着配。
3、基座需要配置修改哪些东西才能跑到子应用呢？
基础配置在基座（包含导航侧边栏登录等，基础组件，不可用的组件扔npm包里，子组件自己下载就行了）
先做基座的配置项：
main.js里配置import microApp from "@micro-zoe/micro-app";
/** microApp 启动 */
microApp.start({'disable-memory-router': true, // 关闭虚拟路由系统'disable-patch-request': true, // 关闭对子应用请求的拦截
}).env.development / .env.production 里配置子应用端口号，有几个配几个VUE_APP_URL_chirdren1 = http://localhost:40001/ #子应用1router.js配置// 配置项目需要单独开启的页面，不带基座里的导航侧边栏等内容走这里{path: '/sub/chirdren1',component: () => import('@/layout/components/appMain/chirdren1'),hidden: true},// 带基座导航侧边栏等内容的页面走这里{path: '/chirdren1',component: () => import('@/layout/components/appMain/chirdren1'),name: 'drg',meta: {title: 'DRG智能管理系统'},hidden: true},// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {return routerPush.call(this, location).catch(err => err)
}
export default new Router({mode: 'history', // 去掉url中的#scrollBehavior: () => ({y: 0}),routes: constantRoutes
})
放router.beforeEach的js配置import { MODULE_LIST } from '@/utils/constant'// 匹配系统路径 确定当前系统let module = MODULE_LIST.find(item=>item.baseUrl == to.path)
if (module) {Cookies.set("menuId", module.id);
}这里是说，项目有很多，但是这里我们要给他设定默认的id，让基座知道往哪跳转constant.jsexport const MODULE_LIST = [{id: '1',name: '子系统1',baseUrl: '/chirdren1'},{id: '3',name: '子系统2',baseUrl: '/chirdren2'},
]建一个去往子应用文件的地方appMain文件夹chirdren1.vue<template><div><micro-app name="chirdren1" :url="appUrl" baseroute="/chirdren1"></micro-app></div>
</template><script>
import microApp from '@micro-zoe/micro-app'
export default {data() {return {module: null,appUrl: process.env.VUE_APP_URL_chirdren1}},created() {},mounted() {microApp.addDataListener('chirdren1', (data) => {console.log('来自子应用chirdren1的数据', data)if(data.type === 'logout') {this.$store.dispatch('LogOut').then(() => {// Cookies.remove("menuId");this.$router.push({path: '/login'})})}})},methods: {goUrl(url) {console.log('===url', url)microApp.router.push({name: 'chirdren1', path: '/chirdren1#'+url})}}
}
</script>name名字很重要，要对应起来，要不进入子应用的时候会有问题
再就是基座里，你切换其他系统的时候需要配置的地方，点击切换系统的方法
changeValue(val) {// 筛选菜单路由表this.$store.dispatch("GenerateRoutes", {val,}).then((accessRoutes) => {// 根据roles权限生成可访问的路由表this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表// 这里去匹配上几个文件配置的系统id，然后进行跳转操作let currentModule = MODULE_LIST.find(item=>item.id == val)location.href = currentModule.baseUrl;});}},上面操作完成，恭喜你微前端已经掌握了90%
因为子应用的配置相比较而言少的离谱咯
下面是子应用的配置
vue.config.js
配置上子应用的端口号40001router.js除去正常路由配置好后加上下面的// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {return routerPush.call(this, location).catch(err => err)
}
export default new Router({mode: 'hash', // 去掉url中的#scrollBehavior: () => ({y: 0}),routes: constantRoutes
})router.beforeEach里配上import { MODULEID } from '@/utils/constant'里面是这个
export const MODULEID = 1/** 模块名称 */
export const MODULE_NAMES = {'1': '/chirdren',
}router.beforeEach里配上let val = MODULEID// 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then((infoRes) => {const chars = infoRes.modules.split(",");// 用户所属系统模块集合Cookies.set("userModules", chars);isRelogin.show = falsestore.dispatch("GenerateRoutes", {val,}).then(accessRoutes => {// 根据roles权限生成可访问的路由表router.addRoutes(accessRoutes) // 动态添加可访问路由表next({...to,replace: true}) // hack方法 确保addRoutes已完成})}).catch(err => {store.dispatch('LogOut').then(() => {Cookies.remove("menuId");// Message.error(err)next({path: '/'})})})配完这些恭喜你，成功跳转到子应用了，需要基座下发或者子应用回传数据，官网api就有就不写了
