网页模板好的网站好,个人网站案例,wordpress添加默认头像,p2p网站方案1、什么项目适合做?
公司项目有N个系统构成一个大体积应用#xff0c;代码越来越多#xff0c;运行打包十几分钟以上
2、技术栈要求#xff1f;
目前我说的这版是vue2为基座#xff0c;子应用vue2#xff0c;vue3#xff0c;react都行#xff0c;vite版本是单独的代码越来越多运行打包十几分钟以上
2、技术栈要求
目前我说的这版是vue2为基座子应用vue2vue3react都行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(itemitem.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.vuetemplatedivmicro-app namechirdren1 :urlappUrl baseroute/chirdren1/micro-app/div
/templatescript
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(itemitem.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就有就不写了
