Nuxt 3 API调用函数的最佳目录结构咨询

结合 Nuxt 3 的约定式规范和你的业务场景，推荐以下目录组织方案：

推荐目录结构 #

your-nuxt-app/
├── composables/
│   ├── useApiFetch.ts       # 通用API请求封装的组合式函数
│   └── api/                  # 按业务模块分类存放具体API调用
│       ├── subscription.ts   # 订阅相关API（如你的subscribeBeta）
│       ├── user.ts           # 用户相关API
│       └── products.ts       # 商品相关API
├── .env                      # baseURL配置文件

各目录作用说明 #

1. composables/useApiFetch.ts
   你的通用请求封装函数放在这里完全符合 Nuxt 规范——composables目录下的文件会被 Nuxt 自动全局导入，无需手动import，在组件或其他业务API函数中可以直接调用useApiFetch。

2. composables/api/子目录
   把subscribeBeta这类业务相关的API调用函数按模块拆分到这个子目录下：
   比如在composables/api/subscription.ts中编写：

   export const subscribeBeta = async (email: string) => {
     const response = await useApiFetch("endpoint", {
       method: "POST",
       body: { email },
     });
     return response;
   };
   

   这种方式的优势：

   • 按业务模块拆分，代码结构清晰，便于维护和查找
   • 同样享受 Nuxt 的自动导入特性，组件中直接调用subscribeBeta即可
   • 保留组合式API的响应式特性（基于useFetch实现）

为什么不推荐放在utils/目录？ #

utils/更适合存放纯工具函数（比如字符串格式化、日期处理这类不依赖 Nuxt 组合式API、非响应式的逻辑）。你的API调用函数基于useFetch，属于组合式逻辑范畴，放在composables/下更贴合 Nuxt 的设计理念。

备选方案：自定义根目录api/ #

如果想完全模仿 React 的api/目录结构，也可以在项目根目录创建api/文件夹，然后在nuxt.config.ts中配置自动导入：

export default defineNuxtConfig({
  imports: {
    dirs: ['api/**']
  }
});

但这种方式不属于 Nuxt 的默认约定，团队协作时需要额外同步配置规则，因此优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者nurdan