一、开头：新项目很清爽，老项目却越来越难看

很多前端项目在刚开始的时候，目录结构通常都很漂亮。

例如一个Vue项目：

src
├── pages
├── components
├── services
├── utils
└── composables

看起来非常清晰：页面在pages，组件在components，接口在services，工具函数在utils。

刚开始开发的时候，大家都很遵守规则。

但是项目做了一段时间之后，你再打开目录，很可能会看到这样的情况：

src
├── pages
├── pages2
├── components
├── components_new
├── utils
├── helpers
├── common

甚至还会出现：

temp
test
backup
old

很多人看到这种目录结构都会有一个感觉：这个项目好像越来越乱了。

但有意思的是，这种情况几乎在所有中大型前端项目里都会出现。这其实是一个很典型的工程问题：工程结构腐化。

二、问题背景：为什么工程结构会慢慢变乱

很多人会觉得目录乱，是因为团队不规范。但实际上，工程结构变乱通常有三个原因。

1. 需求变化

项目刚开始设计目录结构的时候，需求其实还很简单。例如pages放所有页面。

但随着业务增长，页面越来越多，模块越来越复杂，就会出现新的需求：adminPages、mobilePages。于是目录慢慢变复杂。

2. 新人加入

当团队人数增加时，每个人的习惯不同。有人习惯写utils，有人习惯写helpers。久而久之，目录就会越来越多。

3. 快速开发压力

当项目进入快速迭代阶段，开发者往往会优先把功能做完，而不是把结构设计好。于是很多代码会被临时放进temp、test，但这些目录通常不会被清理。

三、核心技术解析：为什么结构混乱会影响项目

很多人会觉得目录乱一点，好像问题也不大。但实际上，工程结构混乱会带来几个明显问题。

1. 代码查找成本增加

当目录越来越多时，开发者会遇到两个问题：我应该把代码放在哪里？或者这个功能在哪里实现？如果查找成本增加，开发效率就会下降。

2. 重复代码增加

当结构不清晰时，开发者往往找不到已有代码，于是就会重新写一份。这就是很多项目重复代码越来越多的原因。

3. 新人上手困难

如果一个项目目录非常混乱，新人往往需要很长时间才能理解结构，这会影响团队效率。

四、代码示例：更清晰的工程结构设计

在Vue项目里，一个比较推荐的结构是：

src
├── modules
│   ├── user
│   ├── order
│   └── product
└── shared
    ├── components
    ├── composables
    └── utils

这种结构的特点是：按业务模块组织代码。

示例：用户模块

modules
├── user
│   ├── pages
│   ├── components
│   └── services

用户相关代码全部放在一起，这样模块边界会更清晰。

页面调用接口

import { getUserList } from "@/modules/user/services/userApi"

const load = async () => {
  users.value = await getUserList()
}

模块内部自洽，不依赖全局结构。

五、实战经验：真实项目最常见的三个结构问题

结合很多项目经验，我发现结构混乱通常来自这几个问题。

1. 目录职责不清

例如utils、common、helpers，没人知道区别。

2. 临时目录长期存在

很多项目会有temp、test，这些目录通常不会被清理。

3. 组件目录过大

例如components目录下有300+个文件，查找组件非常困难。

六、工程建议

如果你的项目已经开始变乱，可以考虑做这些事情。

1. 定期做结构重构

很多团队只重构代码，不重构目录。其实工程结构也需要定期整理。

2. 按业务模块组织代码

例如modules/user、modules/order、modules/product，而不是所有代码都放在全局目录。

3. 减少模糊目录

例如避免common、helpers这种没有明确职责的目录。

4. 建立简单规范

例如pages、components、services、composables，每个目录职责清晰。

七、总结

很多前端项目在发展过程中都会经历一个阶段：工程结构腐化。

原因通常不是技术问题，而是需求变化、团队增长、开发压力。

如果不定期整理结构，项目就会越来越难维护。

所以工程化不仅是工具问题，更重要的是工程结构管理。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13554