集成子系统

hui pro 1.0

hui pro 1.0 是财富中台或操作员中心作为统一外框架，项目根据其打包规范集成至统一外框架中运行，通常是通过 see 平台进行部署，故而框架中默认集成 see 发布物打包格式，并提供两种打包命令

"child": "node --max_old_space_size=4096 build/child/build.child.js",
"build:see:child": "npm run child && node build/package/see.child.js"

npm run child 命令可构建用于财富中台外框架执行的子系统包，需手动上传至服务器。
npm run build:see:child 命令可构建用于 see 平台发布的子系统包。

同时，为防止样式冲突，项目会默认引入 public/frame 文件夹。该文件夹对应子系统运行所在主系统的样式文件，开发时，可根据主框架的不同，自行修改其文件内容。

注意

hui pro 1.0 打包入口为 index.pro.js，本地环境运行入口为 main.js，在修改 main.js 时，需检查是否在 index.pro.js 进行修改，防止本地和部署环境出现功能不一致的现象。

qiankun（乾坤）

qiankun 为市面上应用较为广泛的微前端架构，基于 single-spa 的实现库。

使用微前端的优势在于：

技术栈无关

主框架不限制接入应用的技术栈，微应用具备完全自主权

独立开发、独立部署

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

增量升级

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

独立运行时

每个微应用之间状态隔离，运行时状态不共享

微应用入口文件修改

在 src 目录新增 publicPath.js 文件
webpack 默认的 publicPath 为空字符串，会基于当前路径来加载资源，在主应用中加载微应用资源时会导致资源缺失，需重新设计 __webpack_public_path__ 的值。

/* eslint-disable */
import { checkIsQiankunMicroService } from '@/utils';

if (checkIsQiankunMicroService()) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

webpack 新增配置

webpack 需将模块打包成 umd 模式，需修改 vue.config.js 文件配置，将 webpack 打包模块设置为 umd 格式
qiankun 主框架通过 fetch 请求子应用静态资源。在本地开发时，需允许主应用跨域请求本地环境，需修改 webpack devServer 选项允许跨域访问资源

const pkg = require('./package.json')

//  ...code here
module.exports = defineConfig({
  //  ...code here
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
    //  ...code here
  },
  //  ...code here
  configureWebpack: () => ({
    //  ... code here
    output: {
      library: `${pkg.name}`,
      // 把微应用打包成 umd 库格式
      libraryTarget: 'umd',
      chunkLoadingGlobal: `webpackJsonp_${pkg.name}`
    }
  })
})

微应用添加生命周期

微应用需要在自己的入口文件，添加 bootstrap, mount, unmount 三个生命周期函数，供主应用在适当时机调用

//  src/main.js
import './publicPath';
import { checkIsQiankunMicroService } from '@/utils';
//  code here...

let instance = null;

/* eslint-disable no-new */
function render (props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    // use Runtime-only
    // https://vuejs.org/v2/guide/installation.html
    render: (h) => h(App)
    // 容器选择器，app 仅为示例
  }).$mount(container ? container.querySelector('#app') : '#app');
}

if (!checkIsQiankunMicroService()) {
  render();
}

//  qiankun 导出相关生命周期函数
export async function bootstrap () {
  console.log('[vue] vue app bootstraped');
}

export async function mount (props) {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount () {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

注意

为保证容器 id 唯一性，现在框架中 Vue 挂载节点根据项目名称动态生成，而非固定生成的 app。
在 src/util/index.js 文件中，提供是否运行于 qiankun 环境中的判断方法
新增 scripts 命令 npm run dev:microFront，其环境变量存在于 env.microFront 文件，开发环境请使用该命令进行开发。

# 集成子系统

# hui pro 1.0

# qiankun（乾坤）

# 微应用入口文件修改