如果你使用过后端生成的swagger接口文档,那么肯定会有疑问,能不能直接生成接口文件呢,这样前端不就省事了。经过和后端同事的研究发现了swagger-typescript这个工具正好可以帮我们做这样的事情。好了废话不多说开始正文

安装依赖 @wynnyo/swagger-typescript-api

yarn add @wynnyo/swagger-typescript-api

拷贝文件

拷贝构建文件至项目根目录 文件地址github.com/Curitis/swa…

增加命令

在package.json的scripts中增加命令 gen:api(此处可以不用加命令直接运行也可以,增加命令是为了使用方便) "scripts": { "gen:api": "node swagger-typescript/index.js" }

文件调整

  1. templates/default文件夹下data-contracts.eta里 import { ApiBase } from '@/api-base';中的ApiBase为基类路径自行调整本文对应的文件在github.com/Curitis/swa…
  2. api-base文件中的 axiosInstance为封装后的axiosApiBase里的baseUrl为请求基础路径,请自行调整
  3. index下的generateApi参数需要自行配置,详情看注释

运行获取文件

yarn run gen:api 静静的等待即可

注意事项

如果项目有多个swagger.json可在index在加一个generateApi构建函数注意name和url的调整

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐