在非 antd pro 项目中使用 umi openapi 插件

co松柏

发布于 2026-04-09 12:39:57

900

✨前言

Hi，我是松柏。

ant design pro中有一个openapi插件，它的作用是根据后端接口文档地址，自动生成对应的JS调用方法。

自从使用了这个插件之后，我就再也无法接受手动写请求后端接口的方法了，今天就来介绍下脱离了ant design pro之后如何使用这个插件。

📦安装依赖

首先我们需要在项目里安装包@umijs/openapi：

yarn add @umijs/plugin-openapi

这其实就是在antd pro中使用的openapi插件，它跟antd pro并没有什么耦合，可以在其它项目中直接使用。

然后安装请求库axios：

yarn add axios

当然也可以使用其它的请求库，我这里以axios为例。

⚙️配置

首先配置OpenAPI的生成规则，添加以下openapi.config.ts配置文件：

import {generateService} from '@umijs/openapi'

generateService({
  // 请求工具路径，按实际项目更改，建议尽量按umi-request的参数格式定义请求工具。因为生成的server传参是按umi-request来的。
  requestLibPath: "import request from '@/../config/axios.config'",
  // 后端提供的swagger Json。ps：这里使用相对路径存在问题，没有解决。使用绝对路径、远程路径可以
  schemaPath: 'http://localhost:1101/api/v3/api-docs',
  // 生成servers的路径
  // serversPath: './servers',
  // 项目名称，生成server会在这个文件夹下
  projectName: 'backend-template-new-pine',
  // 命名空间，生成的类型命名空间
  namespace: 'backup',
});

然后新增axios.config.ts文件配置一下axios：

import axios from "axios";

const request = axios.create({
  baseURL: "http://localhost:1101/api",
  headers: {
  },
});

export default request;

➕添加命令

在package.json文件的scripts中添加命令：

"openapi": "ts-node config/openapi.config.ts"

现在我们执行一下进行测试：

ok，执行成功！service目录下生成了接口文件：

之后就可以直接使用了。

这篇文章就到这里了，如果有帮助的话，欢迎点赞关注，或者加我一起学习交流，拜拜👋🏻！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-05-22，如有侵权请联系 cloudcommunity@tencent.com 删除

umi

本文分享自 co松柏微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度