官网

https://apite.frp.boyxing.com/
https://github.com/wangxing218/apite

安装

只在开发环境有效,因此用-D

  1. cnpm i -D apite

安装后,项目的package.json里面会多这个
image.png

配置

使用Vite开发配置

项目内的vite.config.js文件,加上

  1. import { viteExt } from 'apite' // 引入apite
  2. export default {
  3. // ... 这里是vite项目的其他配置,如alias等
  4. configureServer: [viteExt({
  5. // 这里写apite插件的配置,详细内容见下“Apite插件的配置”
  6. dir: 'mock', // api所在目录,相对根目录或绝对路径,默认为 api 目录,这里我修改为mock
  7. })]
  8. }

如下,上面的dir
image.png

Apite插件的配置

  1. {
  2. // 服务端口,命令行模式有效
  3. port: 3000,
  4. // 独立配置文件,默认为 apite.config.js
  5. config: 'apite.config.js',
  6. // 代理设置
  7. proxy: null,
  8. // api所在目录,相对根目录或绝对路径,默认为 api 目录
  9. dir: 'api',
  10. // 静态文件目录,相对根目录或绝对路径,如: 'public'
  11. public: null,
  12. // 文件兼听延时,为 0 时不兼听
  13. watchDelay: 300,
  14. // 是否格式化json输出
  15. jsonFormat: true,
  16. // 是否全局mock
  17. mock: false,
  18. // 请求地址前辍, 命令行模式默认为空,插件默认为 '/api'
  19. prefix: '',
  20. // 是否严格匹配请求类型
  21. strictMethod: false,
  22. // 返回数据格式
  23. defaultType: '',
  24. // 设置跨域,如: '*'
  25. crossDomain: '',
  26. // jsonp请求callback请求参数
  27. jsonpCallback: 'callback',
  28. // 文档生成路径,为空时不生成文档
  29. doc: '/',
  30. // 文档标题
  31. docTitle: '',
  32. // 文档描述,文本或markdown文档地址,相对于根目录
  33. docDesc: '',
  34. }

使用

在api所在的项目中,设置好dir并运行vite项目,会自动在项目的根目录创建apite的文件夹(默认文件名是api,除非你自己配置dir),如下图,就是我自己配置了dir
image.png
文件夹里面创建index.js文件夹,写入如下

  1. const { api, delay, mock, resp } = require('apite')
  2. // JSON
  3. api.get('/json', { msg: 'json'})
  4. // mock 数据
  5. api.get('/json', ()=>{
  6. return mock({
  7. 'string1|2-7':'a' //其他方法参考下面的
  8. })
  9. })
  10. // POST
  11. api.post('/post', ctx=> { ctx.body = ctx.post})

然后用get方法axios去发送url:http://localhost:3000/api/json 即可。

其他mock方法可以参考
mockjs 模拟后端