Apifox中如何自动生成并导出接口代码？

Question

在Apifox中，如何为不同前端框架（如Vue 3 + TypeScript、React + Axios）自动生成并导出符合项目规范的接口调用代码？常见问题包括：导出的代码未适配项目中的请求拦截器/响应拦截器配置；未自动注入Base URL或Token鉴权逻辑；泛型类型推导失败导致TS类型不准确；多环境（dev/test/prod）变量未动态替换；以及无法将接口分组导出为独立模块（如`api/user.ts`、`api/order.ts`）。此外，部分用户反馈“代码生成”功能中语言模板缺失自定义选项，或导出后需手动修改路径、参数解构方式及错误处理逻辑，降低了接入效率。如何通过Apifox的「代码生成器」配置自定义模板、绑定环境变量、启用TS接口定义（.d.ts）联动，实现开箱即用、零修改接入项目？

Answer 1

```html

一、基础认知：Apifox 代码生成器的核心能力与默认行为

Apifox 内置的「代码生成器」支持 Vue 3 + TypeScript、React + Axios 等主流前端技术栈的代码模板，但其默认输出为“通用适配型”——即基于标准 fetch / axios 实例的最小可行代码，未感知项目级约定（如 request.ts 封装、useRequest Hook、Axios 拦截器链）。例如，默认 Axios 模板不会自动注入 instance.defaults.headers.common['Authorization']，也不会读取环境变量中的 BASE_URL。

二、问题归因：五大典型失配场景的技术根因分析

• 拦截器失配：生成代码直接调用 axios.get()，绕过项目中已注册的 request/response interceptors；
• 鉴权逻辑缺失：未关联 Apifox 的「环境变量」+「全局前置脚本」，Token 无法从 localStorage.getItem('token') 或 Pinia/Vuex store 动态注入；
• TS 类型断层：接口响应体未映射为泛型 ResponseData<T>，导致 data: any，破坏类型安全；
• 多环境硬编码：生成代码中 URL 为 "https://api.dev.example.com/user"，而非 ${API_BASE_URL}/user；
• 模块组织扁平化：所有接口导出至单个 api.ts，不支持按 Apifox「分组」（Group）自动拆分为 api/user.ts、api/order.ts。

三、进阶配置：自定义模板引擎（Mustache）深度实践

Apifox 支持通过「自定义代码模板」覆盖默认行为。以 Vue 3 + TypeScript 为例，需在 项目设置 → 开发者工具 → 自定义代码模板 中创建新模板：

{{#each interfaceList}}
// api/{{group.name | kebabCase}}.ts
import { request } from '@/utils/request'
import type { ResponseData } from '@/types'

{{#each functionList}}
export function {{functionName}}({{#each parameters}}{{name}}{{#unless @last}}, {{/unless}}{{/each}}) {
  return request<{{responseType}}>({
    url: '{{path}}',
    method: '{{method}}',
    {{#if parameters}}data: {{#if hasBodyParam}}body{{else}}params{{/if}}{{/if}}
  })
}
{{/each}}
{{/each}}

四、环境协同：绑定变量 + 动态 BaseURL + Token 注入链路

Apifox 配置项	对应前端实现	生效位置
API_BASE_URL（环境变量）	axios.create({ baseURL: import.meta.env.VUE_APP_API_BASE_URL })	request.ts 初始化
TOKEN_KEY（环境变量）	instance.interceptors.request.use(cfg => { cfg.headers.Authorization = localStorage.getItem(TOKEN_KEY) })	Axios 拦截器

五、类型精准：TS 接口定义（.d.ts）双向联动机制

启用「生成 TypeScript 类型定义」后，Apifox 将自动提取每个接口的请求/响应 Schema，生成 api/types.d.ts：

// 自动生成示例
export interface UserListReq { page: number; size: number }
export interface User { id: string; name: string }
export interface UserListRes { list: User[]; total: number }
// 在 api/user.ts 中可直接引用：
export function getUserList(params: UserListReq) {
  return request<UserListRes>({ url: '/user/list', params })
}

六、工程化落地：CI/CD 集成与零修改接入验证流程

1. 在 Apifox 中完成接口文档更新 → 点击「批量生成代码」→ 选择自定义 Vue3-TS 模板；
2. 导出 ZIP 后解压至项目 src/api/ 目录，覆盖已有文件；
3. 运行 tsc --noEmit 验证 TS 类型无误；
4. 启动 dev server，调用 getUserList({page:1})，检查 Network 面板是否携带 Authorization Header 及正确 BaseURL；
5. 修改 Apifox 环境为 prod，重新导出，确认 URL 自动切换为生产地址。

七、高阶技巧：基于 Mermaid 的自动化流程图与模板调试策略

graph LR
A[Apifox 接口变更] --> B{是否启用自定义模板？}
B -->|否| C[生成通用代码 → 手动改造]
B -->|是| D[读取环境变量 → 注入 BASE_URL/TOKEN]
D --> E[解析分组 → 拆分文件路径]
E --> F[提取 Schema → 生成 .d.ts]
F --> G[渲染 Mustache 模板]
G --> H[输出模块化 TS 文件]
H --> I[零修改接入项目]

八、避坑指南：五类高频错误与修复对照表

现象	根本原因	修复方式
生成代码中 data 类型为 any	未开启「生成 TypeScript 类型定义」或响应 Schema 缺失	补全接口「响应示例」并勾选「启用 TS 类型生成」
多环境导出 URL 始终为 dev 地址	代码模板中未使用 {{environment.API_BASE_URL}} 变量语法	在模板中将 url: '{{path}}' 改为 url: '{{environment.API_BASE_URL}}{{path}}'

九、框架特化：Vue 3 Composition API 与 React Hook 的模板差异要点

针对 Vue 3，建议模板中封装 useApiXxx 组合式函数：

export function useUserList() {
  const { data, loading, run } = useRequest(getUserList, { manual: true })
  return { data, loading, getUserList: run }
}

针对 React，则生成 useUserList 自定义 Hook，自动集成 swr 或 react-query 的 useQuery 调用模式，确保与团队技术栈对齐。

十、持续演进：Apifox 插件生态与未来扩展方向

通过 Apifox CLI 工具（apifox-cli），可将代码生成嵌入 Git Hook 或 CI 流程，实现「Push to Apifox → 自动触发生成 → 提交至 src/api」的闭环。同时，社区已出现 apifox-template-vue3-pinia、apifox-template-react-query 等开源模板仓库，支持一键导入，大幅降低定制门槛。

```