一、配置化实现
1. 环境变量配置
- 文件结构 ：通过 .env.production 等环境变量文件管理不同环境的配置
- 动态加载 ：在 vite.config.ts 中使用 loadEnv 动态加载环境变量
- API 配置 ：在 src/utils/config.ts 中统一管理 API 地址和缓存键
2. 构建配置
- 多环境构建 ： package.json 中定义了 build:dev 、 build:staging 、 build 等不同环境的构建命令
- 代理配置 ：在 vite.config.ts 中配置了 API 代理，解决跨域问题
- 自定义插件 ：实现了 htmlInjectBuildInfo 插件，在构建时注入分支和时间信息
二、标准化实现
1. 编码规范
- EditorConfig ： .editorconfig 统一了编辑器配置（缩进、换行符等）
- Prettier ： .prettierrc 定义了代码格式化规则（单引号、无分号）
- ESLint ： eslint.config.ts 配置了 TypeScript 和 Vue 的代码检查规则
2. 目录结构标准化
- 经典 MVC 架构 ：采用 pages 、 layouts 、 components 、 stores 、 services 等标准化目录结构
- 自动路由 ：使用 vite-plugin-pages 实现文件系统路由
- 自动导入 ：通过 unplugin-auto-import 和 unplugin-vue-components 自动导入 Vue、Vue Router、Pinia 等
3. 开发流程标准化
- 脚本命令 ： package.json 中定义了 dev 、 build 、 lint 、 format 等标准化命令
- 类型检查 ：使用 vue-tsc 进行 TypeScript 类型检查
- 代码格式化 ：集成 Prettier 确保代码风格统一
三、通用化实现
1. 工具类通用化
- 通用方法 ： src/utils/index.ts 中实现了 copyClipboard 、 guid 、 formatFileSize 、 debounce 、 throttle 等通用工具函数
- 本地存储 ： src/utils/local-storage.ts 封装了本地存储操作
- 配置管理 ： src/utils/config.ts 统一管理项目配置
2. Hooks 通用化
- 鉴权 Hook ： src/hooks/useAuth.ts 实现了用户鉴权逻辑
- 状态管理 ：使用 Pinia 实现了 user 和 config 等通用状态管理
3. 组件通用化
- 布局组件 ： src/layouts 中实现了 DefaultLayout 、 AppHeader 、 AppSidebar 等通用布局组件
- 第三方组件库 ：统一使用 Ant Design Vue 组件库，确保 UI 风格一致
总结
该项目在配置化、标准化、通用化方面都有较好的实现：
- 配置化 ：通过环境变量和配置文件实现了多环境管理和动态配置
- 标准化 ：统一了编码规范、目录结构和开发流程
- 通用化 ：封装了通用工具类、Hooks 和组件，提高了代码复用率
整体架构清晰，遵循了现代前端工程化的最佳实践，便于团队协作和项目维护。
