vue大型项目拆分_基于Vue的多项目整合实践

在笔者所在的前端开发团队中，采用前后端分离方案是在整个业务线稳定后进行的。业务前期主要采用后端套模板的方式，现阶段是采用基于Vue的单页开发模式。

这会出现一种情形，产品在不断迭代过程中，由于之前线上前端代码并非工程化项目，后面新需求多是另起Vue项目来进行编码上线，前端在整个业务线上没有统一的工程，项目过多分布散乱并且不易优化管理。(项目指根据新需求创建的项目代码，工程指一套代码下包含多个项目。后文以此约定。)针对这种情况下我们做出一些尝试，将目前存在的多个项目整合成一个工程，统一入口。

当然我们更希望整合成统一工程后可以实现后续新需求接入无痛化。下文则主要围绕项目整合过程中遇到的些许问题，分享一些可行解决方案。简要从几个方向，代码层级化分、组件处理、路由处理、数据状态维护、其他优化等来简述。

1. 代码层级划分

如何合理划分整个工程目录？

在前端开发中我们首先会面对如何将代码及静态资源划分目录层级放置问题。比如在前端洪荒时代通常会以img、css、js命名不同目录。那么在结合Vue相关技术栈以及多项目整合场景下，如何划分目录才能保证代码层次合理呢？

谈到这个问题的时候，我们可以首先思考下整个工程具体需要哪些相关功能。在抛开具体源码内部结构情况下，主要有构建脚本、构建配置、Mock数据、项目文档、项目源码等。在不结合具体技术栈的情况下，这也是前端在工程化方面大致目录。

具体到项目源码内部目录结构，按照不同功能模块，主要做了以下层次划分：

静态资源按项目拆分目录

路由组件按项目拆分目录

子组件按项目及所属父路由组件拆分目录

路由层按项目拆分不同文件

数据层按项目拆分不同目录

mixins混合代码拆分不同文件

配置层按项目拆分不同文件

以项目src源码下组件相关目录为例，如下图所示：

├── pages // 路由组件目录

│   ├── README.md

│   ├── base // 全局基础路由组件目录

│   │   └── SuccessPage.vue

│   ├── period_process // 项目A路由级别组件目录

│   │   ├── ChooseTime.vue // 项目A选择时间路由组件

│   │   ├── xxx

│   └── period_suborder // 项目B路由级别组件目录

│   └── xxx

|

├── components // 子组件目录

│   ├── README.md

│   ├── base // 全局基础子组件目录

│   │   ├── AddressInfo.vue