大型vue项目应以业务域为骨架划分目录，src/modules/下按业务建子目录，各模块内聚组织views、components等；全局能力分层管理，路由与状态按业务对齐，静态资源与工程配置边界清晰。
大型 Vue 项目目录结构不能只按技术类型（如 components、views、utils）机械切分，而应以业务域为骨架、功能职责为血肉，兼顾内聚性与复用性。核心是让“改一个功能”能快速定位到一组语义一致、就近组织的文件，而不是在十几个目录里来回跳转。
按业务域划分主模块
在 src/modules/ 下为每个主业务建独立子目录，例如 user/、order/、dashboard/。每个模块内部包含：
- views/：该业务下的页面组件（如 UserProfileView.vue、UserSettingsView.vue）
- components/：仅本业务使用的私有组件（如 UserAvatarUpload.vue）
- services/：封装本业务专属 API 调用（如 user.service.ts）
- store/：Pinia 模块文件（如 user.store.ts），只管理本域状态
- types/：本业务相关 TypeScript 接口与类型（如 user.types.ts）
全局能力集中分层管理
跨模块复用的能力必须剥离出来，统一归口、严格分层：
- src/components/ 放真正通用的 UI 组件：按用途再分 ui/（Button、Dialog）、layout/（MainLayout、Sidebar）
- src/composables/ 存组合式函数：命名带 use 前缀（如 useTablePagination、useFormRules）
- src/services/ 是 API 层唯一入口：含 axios 实例配置（api.ts）和各模块 service 文件，不直接在组件里写 fetch
- src/assets/ 仅放构建时处理的资源：图片进 images/，图标进 icons/，样式变量统一在 styles/variables.scss
路由与状态按业务对齐
避免路由配置和状态管理脱离业务上下文：
- 路由定义分散到各业务模块内，如 src/modules/user/routes.ts，主路由文件（router/index.ts）只做动态导入和合并
- Pinia store 按模块拆成独立文件（store/modules/user.ts），通过 store/index.ts 统一注册，不写巨型单文件 store
- 所有模块内引用路径优先使用相对路径（如 ./components/UserSearchBar.vue），确保模块可整体迁移或抽离
静态资源与工程配置边界清晰
混淆 public 和 src/assets 是高频错误：
- public/ 只放不参与构建的纯静态文件：favicon.ico、manifest.json、第三方 JS SDK（需 script 标签引入）
- src/assets/ 中的资源会被打包、哈希、注入，图片必须用 @/assets/images/logo.svg 方式引用
- Vite 别名要在 vite.config.ts 中统一配置（如 @/ → src/，@api/ → src/services/），禁止硬编码相对路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
