# EOS前端源码二开介绍

# 1.源码source目录结构

源码source中目录结构如下

.afcenter-mobile-ui (afcenter前端移动端)
.afcenter-ui（afcenter前端）
.bfp （bfp后端；工作流程相关代码）
.bfp-ui（bfp前端）
.components-ext-ui （扩展组件相关代码）
.portal-ui （门户前端代码）
.widget-ui （门户中widget代码）
.taskcenter （r任务中心前端源码）

# 2.前端项目启动

注意：

源码运行环境建议使用以下版本：

npm: 6.14.13
node: 14.17.3

所有的前端项目首先需要切换仓库：
➜  base $ npm config set registry=https://packages.aliyun.com/623d836256f85235f7dd713b/npm/npm-registry
➜  base $ npm login
Username: 623db7e13c6b5273a0764cb4
Password: UP1dH-IITR[I
Email: (this IS public)（邮箱任意填写一个符合格式的即可）
➜ base $ npm install

注意:如果依赖下载不成功可以考虑一下方案

1.把package-lock.json还有yarn.lock删除，还有node_modules删除，重新执行npm install ;

2.遇到依赖冲突，执行npm install --force

# afcenter-ui 项目启动

➜ afcenter-ui $ npm install  
➜ afcenter-ui $ cd base
➜ base $ npm install
➜ base $ npm run dev

如果需要修改后端代理，将在afcenter-ui/base/build/webpack.dev.js中的下方配置项改为实际应用的afc后端服务ip端口地址

# afcenter-ui 项目打包

➜ npm run build:prod-ie-i18n

'/afc/api': {
        target: 'http://10.15.15.151:13083/',
        pathRewrite: { '^/afc': '' }

# afcenter-mobile-ui 项目启动

➜  afcenter-mobile $ cd base/packages/app-general
➜  app-general $ npm install
➜  app-general $ npm run dev

# afcenter-mobile-ui 项目打包

➜ npm run build

如果需要修改后端代理，修改base/packages/app-general/build/webpack.dev.js中同上配置

# bfp-ui 项目启动

➜ bfp-ui $ npm install
➜ bfp-ui $ npm run dev

# bfp-ui 项目打包

➜ npm run build:prod-ie-i18n

# 3.afcenter-ui 与其他微前端之间的联系

afcenter-ui 作为一个base 基座,像bfp-ui 、compontents等微前端都需要依赖afcenter-ui;

在afcenter-ui/base/build/webpack.dev.js 中配置了各个微前端的代理；代理地址可以是本地启动的微前端地址，也可以部署在线上的afcenter地址；

例如："/bfp": {
         target: "http://localhost:8010/",
      },
      或者：
      "/bfp": {
         target: "http://线上afcenter地址",
      },

在微前端中build/mfp.config.js中，remotes配置了base 基座的地址；为确保在开发模式下微前端页面能够正常显示和使用，要确保base地址正确，能够正常访问；

例如在bfp-ui中:

remotes: {
    //开发模式下ide的地址；可以用本地启动的地址也可以是线上部署的afcenter地址
    ide: devMode ? 'ide@http://10.15.15.151:13082/ide/remoteEntry.js': 'ide@./ide/remoteEntry.js',
    base: devMode
      ? 'base@http://localhost:8000/remoteEntry.js' //开发模式下下base的地址
      : 'base@/remoteEntry.js'
  }