网站目录结构图：别让文件乱成你找不到的网站袜子

打开一个老开发的项目，你会发现他的目录文件像衣柜里塞满的T恤——`index.html`躺在根目录，`style.css`和`script.js`挤在同一个文件夹里，结构图片散落各处，网站`vendor`目录里堆着三年前下载的目录jQuery插件。这种结构不是结构不能跑，但每次改需求，网站你得花十分钟在文件树里翻找，目录像在深冬早晨找那双配大衣的结构皮鞋。我接手过一个这样的网站项目，光找那个负责轮播图的目录JavaScript文件，就耗掉了一个下午的结构咖啡因。

好的网站目录结构不是装饰，是目录你的数字工作台。它直接决定你修bug的结构速度、新同事上手的时间，甚至服务器部署时的痛苦程度。我见过最干净利落的项目，根目录下就几个文件夹：`src`、`public`、`config`、`tests`。`src`里再按功能分`components`、`pages`、`utils`、`assets`。就这么简单，连刚毕业的实习生都能在半小时内找到“那个改了会炸的按钮”对应的文件。

但别急着照抄。目录结构是活物，得跟着项目呼吸。一个纯静态展示页，你硬套上`src`、`dist`、`node_modules`那套，反而像给自行车装了航空发动机。我做过一个企业官网，总共五个页面，最后干脆把所有html放根目录，css和js各一个文件夹，图片按轮播图、产品图、图标分子目录。上线三年，维护的人没骂过我一次，这比任何架构理论都靠谱。

真正该较真的是那些会被反复修改的文件。比如`styles`目录，别把全局样式和页面样式混在一起。全局变量、reset、mixins放一个`base`子目录，各个页面或组件的样式按名字对齐放`modules`。有次我为了改一个按钮的颜色，在2000行的`style.css`里滚动搜索`button`，滚了整整八屏——那种绝望，就像在杂货铺里找一瓶特定牌子的酱油。

图片资源也别一股脑全塞进`images`。按用途分`icons`、`content`、`backgrounds`，文件名带日期或版本号。我见过有人存了一张`final_final_v2.png`，后来发现还有张`final_final_v2_2.png`，最后删的时候根本分不清哪个是老板真正要的那版。命名规范比目录层级更重要，文件夹只是骨架，文件名才是血肉。

再提一嘴`node_modules`或`vendor`这种自动生成的目录——永远别手动改它。但你要在结构图里明确标出来，让新人知道“这里不要碰，碰了跑不起来”。有次我手贱删了个`vendor`里的文件，结果整个构建系统像断了线的木偶，半小时后才明白自己干了什么蠢事。目录图上画个红色警告线，不是形式主义，是给你自己留的救命绳。

最后，别忘了给目录留个`README.md`或者`ARCHITECTURE.md`，用三句话讲清楚每个顶层目录是干嘛的。别写长篇大论，就写“`src`放源码，`public`放静态资源，`scripts`放构建工具，其他别动”。这比任何复杂的图表都实在。我见过团队花一整天画那种带箭头和颜色的架构图，结果三个月后项目重构，图成了废纸，但那个写了五行的README，至今还在用。

目录结构这事，说白了就是让你在三个月后打开自己项目时，还能像个陌生人一样快速找到入口。别追求什么最佳实践，适合你团队协作习惯的就是好结构。如果你现在打开项目觉得“好像有点乱”，那就花个下午理一理——别拖，乱文件夹会像房间里的杂物，越堆越让人不想收拾。