大型前端应用如何做系统融合？
💡
原文中文，约5800字，阅读约需14分钟。
📝
内容提要
该文章介绍了A平台和B平台的融合优化方案，通过部署优化、代码仓库整合、项目框架、系统权限等措施实现了两个平台的融合。同时，还设计了目录结构、应用类型判断、路由设计、环境变量设计、请求设计、权限和登录、公共函数设计、脚手架配置设计、Vuex store设计和页面引用设计等方案。最终，通过这一融合过程提升了用户体验和组件复用率。
🎯
关键要点
- A平台和B平台同属于同一系统链路，前者提供注册入驻服务，后者提供具体业务操作服务。
- 目前B应用的页面已100%嵌入A应用，存在系统和体验上的痛点。
- 融合优化主要体现在用户体验提升和降本增效。
- 部署优化计划将A应用前后端分离，采用混合部署策略。
- A应用与B应用的代码仓库整合，确保分离过程不影响现有配置。
- 融合后用户可继续使用各自域名访问，保证内容一致性。
- 目录结构设计防止文件冲突，减少融合复杂度。
- 应用类型判断通过域名映射表实现，确保前端识别环境。
- 路由设计根据不同域名获取路由配置，保持路由path不变。
- 环境变量设计针对不同环境设置不同变量文件。
- 请求设计封装基础公共请求，支持各业务的参数处理。
- 权限和登录根据应用类型字段识别不同环境，维护多套登录逻辑。
- 公共函数设计合并两个项目中的公共函数，解决命名冲突。
- 脚手架配置设计优化配置，确保项目正常运行。
- Vuex store设计保持结构不变，合并重复模块内容。
- 页面引用设计允许直接引入应用B的文件和组件，打通后端数据。
- 经过两个月的工作，成功整合两个大型项目，提升组件复用率和用户体验。
➡️
