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/ #子应用1
router.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.js
export 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
配置上子应用的端口号40001
router.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 = false
store
.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就有就不写了
