个人主页的项目结构治理记录

记录项目如何从多套部署链路整理为清晰、稳定、可检查的 Vercel-only 结构。

· 开发笔记

整理前的问题

项目早期同时保留了多套部署文件、代理服务和历史资源。它们虽然记录了不同阶段的尝试,但也让根目录越来越复杂。

常见问题包括:

  • 多个部署入口表达相同目标;

  • 运行脚本、服务器代码和前端代码边界模糊;

  • 本地构建产物反复出现在根目录;

  • 静态资源保留与删除缺少自动检查;

  • 文档描述和实际部署方式逐渐产生偏差。

当前目录边界

整理后的主要职责如下:

| 目录 | 职责 | | --- | --- | | src | Vue 前端源码 | | src/features | 按功能组织的页面组件 | | src/services | 浏览器端 API 请求 | | api | Vercel Function 入口 | | server | 本地与线上共用的 Node 服务 | | scripts | 质量检查与健康检查 | | public | 图片、字体和公开静态文件 |

这些边界让每个文件都有明确归属,也让后续新增博客功能时可以继续放在现有目录中。

自动检查的价值

项目现在通过结构检查维护根目录白名单、必要路径、静态资源和环境变量引用。

完整检查命令如下:

npm run check

它会依次执行:

  1. 项目结构检查;

  2. ESLint;

  3. Vite 生产构建;

  4. PWA 构建。

完成验证后,本地产物可以通过下面的命令清理:

npm run clean:local

最终原则

文件路径精简的目标不是追求目录数量最少,而是让源码、配置、服务、内容和本地产物各自处在稳定边界中。