微前端配置要求

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博客