一、Qiankun 微前端框架简介

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

微前端架构具备以下几个核心价值：

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

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

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

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

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

二、微应用接入 qiankun 相关配置

根据微应用所采用的技术框架，如 React、Vue、Angular 等，引入不同的 qiankun 微前端微应用配置，具体可参考项目实践-微应用。

主要配置如下：

1. 针对 webpack 打包的项目，src 目录新增 public-path.js 文件，保证打包发布的路径与接入对应。

2. 配置路由的 baseRoute，与主应用中的 activeRule 对应。 3. 暴露微应用相应的生命周期钩子。

主应用一般为项目devops-frontend

1. 在 /src/routers/module 下添加相关路由文件（0730 版本计划用配置文件代替路由代码）

如目前已用微前端方式接入的流量回放项目，添加的路由配置如下。

2. 在 /src/i18n/zh/menu.js 下添加菜单翻译，如下。

4. 在主应用中的 .env 文件，添加微应用的入口路由，示例如下。

.env.local 配置的入口为本地启动微应用时访问的 url。

其他 .env 文件配置的为部署后的微应用路径，统一以 /child/ 开头，后面为微应用部署解压后的文件夹名。

5. 若要在本地，运行主应用 Devops-frontend ，查看微应用项目内容，还需要在主应用的 src/webpack.server.js 中，加入接口代理的代码，这样才能在主应用正确转发请求到微应用的服务。

示例如下。

微应用可以和 Devops 部署到一个服务器，部署目录为 ‘/apps/svr/apache2/htdocs/child'，文件夹名称和主应用中配置的 ENTRY 保持一致即可。

部署脚本示例如下，需要将其中的 xxx 替换成项目名。