如何制定Vue项目代码的长尾词策略？

本文共计2471个文字，预计阅读时间需要10分钟。

背景：由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码，随着两个产品功能的差异越来越大，代码的冗余度和耦合度也日益增加，为了便于后续的维护和新增功能，需要进行代码重构。

结果：将数据库防火墙和数据库审计产品的代码进行重构，优化代码结构，降低代码冗余度和耦合度，提高代码的可维护性和可扩展性。

背景

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

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

目的

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

拆分前

流程设计

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

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

目录结构设计

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