Vue 项目一套代码两个项目拆分方案

背景

由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码，随着两个产品功能的差异越来越大，代码的冗余度和偶合度越来越高，为了便于后期维护以及添加新功能，所以基于原来的项目代码，进行了代码结构拆分。

注意：本次拆分只拆分了可以拆分的部分，有的模块例如：规则、关于我们，是没有进行拆分的，一是有的模块很简单，没必要拆分；二是有的模块原先写得代码偶合太严重，无法拆分，如果要拆分，需要花费大量精力去梳理代码，同时还要后端配合拆分。

目的

将此次代码拆分方案记录下来，便于后来的开发人员快速熟悉项目结构。

拆分前

流程设计

项目拆分前，区分数审和防火墙功能的流程如上图所示。

访问系统时，先加载入口文件 main.js，然后加载登录页 login.vue，加载登录页的同时获取产品模式并保存到 session.storage.platformType 中，接着用户登录系统进入具体页面，该页面同时包含了数审和防火墙的功能，根据 session.storage.platformType 保存的值来判断，具体显示哪个功能。

目录结构设计

项目拆分前的目录结构如上图所示。

该目录结构是初始化一个 Vue 项目时的基本目录，根据目录结构，基本上看不出该项目包含了两个不同的产品，也不知道不同产品模式下会加载哪一部分文件，结构不清晰。

存在的问题

通过分析，可以发现当前的系统流程和目录结构是存在很多问题的，大概总结下：

1. 加载登录页的时候才获取产品模式，如果登录页加载完成，而产品模式还未获取或者获取不到，那么登录页显示的产品信息有可能是错误的；
2. 每次进入一个具体页面，如果同时包含了数