1.基座应用配置(framework)
- 基座应用s是根据若依前端框架的基础之上,引入了qiankun框架,对基座应用的菜单管理、左侧菜单渲染组件、动态路由的填充进行了一些兼容性的修改与配置,让若依前端框架可以正常引入微应用
配置项抽取
- 入口配置项说明
pedestal/src/microConfig.js
const MicroApps = [
// 工作流及我的审批
{
title:"微应用所属模块",//微应用中文描述
name: '微应用名称',//微应用的name
// entry 微应用的入口 开发环境对应微应用的服务 生产环境的对应nginx的代理转发
entry: process.env.NODE_ENV === "production" ? 'nginx反向代理路径' :'开发环境微应用的服务',
container: '基座应用用于显示微应用的容器id',//固定不变
activeRule: '微应用的激活规则',//activeRule 微应用的激活规则 注意微应用之间该值的唯一性
props: {
//用于基座应用向微应用传递数据
}
},
]
export default MicroApps
注意:
- microConfig.js文件的作用不仅仅是为了声明微应用的配置项,在基座应用的菜单管理中,添加菜单时,配置项中的entry还将作为获取微应用菜单路由的接口地址
entry与activeRule的命名绝对不能重复,否则在基座应用页面刷新会直接变成微应用页面
activeRule命名规范说明
activeRule: '微应用的激活规则'
提示
- 微应用的激活规则:当地址栏跳转的路由包含适用于激活规则的字符时,浏览器将自动加载对应的微应用,所以在对每一个微应用定义activeRule时,应当确保其唯一性(规则中特殊的一部分字符,还作为了基座应用中主容器与微应用容器的切换条件!该处请看下方代码)
- activeRule的命名不应当包含micro的字符,该字符会导致qiankun框架的未知错误,按照约定,所有微应用的命名规范应当以**mic+**模块名称的形式,比如:micActiviti、micSystemConfig。。。
/src/layout/AppMain.vue
<template>
<div>
{/* 主容器 */}
<section class="app-main" v-if="!isChildApp">
...
</section>
{/* 微应用容器 */}
<div v-if="isChildApp" class="app-main" id="subcontainer"></div>
</div>
</template>
<script>
export default {
name: 'AppMain',
computed: {
isChildApp() {
{/* 微应用的激活规则必须包含sub字符才能保证当前要渲染的微应用显示在上方的微应用容器中 */}
if (this.$route.path.match('mic')) {
return true;
} else {
return false;
}
},
......
2.微应用配置
微应用的配置内容如要分为以下几个部分:
- 路由表json文件的封装
- 项目工程环境的基础配置
#路由表json文件的封装
project/public/router.json
{
"routerPrefix":"微应用路由前缀",
"moduleName": "微应用的模块名称",
"routerList": [
{
"path": "菜单路由",
"name": "菜单name",
"meta": "菜单中文名称",
"component": "该菜单的工程目录(从views后面一级开始写起)",
"permList":[
{
"name": "权限名称",
"symbolName":"权限标识符"
}
]
}
]
}
提示
- 对 routerPrefix 的解释:routerPrefix的命名应当与基座应用微应用配置项的activeRule保持一致
- 对 moduleName、name、symbolName 的解释:moduleName、name、symbolName配合:分隔号,共同组成每一个菜单下权限按钮的标识符全称,如:micActiviti:modeler:add 该标识符表示 工作流微应用【project】中流程模型菜单【modeler】下的新增按钮【add】
3.微前端项目开发规范
framework 基座应用,用于菜单管理、系统参数设置;用于微应用的注册;
generic 属于系统模块通用功能微应用
foundation 属于业务模块通用功能微应用
project 每个项目独有的部分功能微应用 命名规范 如:csdn-micro-project(csdn独有的功能微应用)
#现有项目或者新项目使用微前端的方式方法
1.微前端代码仓库的创建 以csdn的微前端项目为例 micro-front-csdn
//添加基座应用
git submodule add 基座应用仓库的地址
//添加系统通用功能微应用
git submodule add 通用系统功能微应用仓库的地址
//添加行业业务模块通用功能微应用
git submodule add 业务模块通用功能微应用仓库的地址
2.运行方法 以csdn的微前端项目为例
csdn-micro-framework
cd csdn-micro-framework
git submodule init
git submodule update
git checkout 项目分支
csdn-micro-generic
cd csdn-micro-generic
git submodule init
git submodule update
git checkout 项目分支
csdn-micro-foundation
cd csdn-micro-foundation
git submodule init
git submodule update
git checkout 项目分支
4.部署
配置微前端nginx及相应问题_微前端部署nginx配置-CSDN博客