Vue 3 + Vite 项目搭建与目录结构最佳实践

目录结构约定

团队项目最重要的不是技术选型，而是目录约定。我们采用按职责分层的结构：

src/
├── api/          # 接口封装，按后端模块拆文件
├── assets/       # 静态资源
├── components/   # 公共组件
├── router/       # 路由配置
├── store/        # Pinia 模块
├── utils/        # 工具函数（request.js 等）
└── views/        # 页面级组件

Vite 的环境变量

用 .env.development / .env.production 区分环境，变量必须以 VITE_ 开头才会暴露给客户端：

VITE_APP_BASE_URL = https://api.example.com
VITE_FILE_HOST = https://static.example.com

注意 .env 的修改不会热更新，改完要重启 dev server。

状态管理用 Pinia

Pinia 相比 Vuex 去掉了 mutation，TypeScript 推导也更友好。新项目没有理由再用 Vuex。推荐组合式写法，与 Vue 3 心智一致。

小结

搭好骨架后，尽早把 ESLint + Prettier 统一掉，规范落地越早成本越低。剩下的就是按约定写业务了。