Antd Design Pro V5 设置 proxy 切换 Mock 数据为接口真实数据

更新日期: 2021-05-14 阅读次数: 408 字数: 576 分类: ReactJS

概要

ant-design-pro 关闭 mock 的方法为,修改 config/proxy.ts 的 dev 配置,然后启动服务时使用:

tyarn start:dev

替代:

tyarn start

详细分析

首先 mock 数据在哪里?通过搜索关键字居然没搜到,原来接口返回的字段内容都是通过 js 动态生成的。

文件:mock/listTableList.ts

export default {
  'GET /api/rule': getRule,
  'POST /api/rule': postRule,
};

mock 目录下针对不同的功能有不同的 mock 文件:

> ls mock/
listTableList.ts  notices.ts  route.ts  user.ts

antd design pro V5 居然没有 mock 的使用文档 。。。

在 V4 版本找到了使用文档: https://pro.ant.design/docs/mock-api-cn

禁用掉 Mock 数据:

tyarn start:no-mock

最终还是找到了 V5 的文档:

https://beta-pro.ant.design/docs/development-cn

果然,禁用掉 mock 之后,就报 405 错误了:

Request URL: http://localhost:8000/api/login/account
Request Method: POST
Status Code: 405 Method Not Allowed

但是,这个做法是不合理的,因为开发环境既然 nodejs 占用了 8000 端口, 那么实际上,你就没法再开一个用 8000 端口的服务来写 API 啊。。。

所以只能使用 proxy 的做法。

查看文件 config/config.ts

const { REACT_APP_ENV } = process.env;

proxy: proxy[REACT_APP_ENV || 'dev'],

antd design pro v5 修改 proxy 不生效

启动参数对应的配置在 package.json 中:

"start": "cross-env UMI_ENV=dev umi dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
"start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",

测试一下 dev,我看参数中有 MOCK=none 这样的设置:

修改 config/proxy.ts 的 dev 配置:

  dev: {
    '/api/': {
      target: 'https://www.sunzhongwei.com',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },

然后使用 dev 启动服务:

tyarn start:dev

确实使用 start:dev 就可以看到正常的 404 了,同时在我远端服务器中也看到了转发的请求

MyIP - - [06/May/2021:16:41:20 +0800] "GET /api/currentUser HTTP/1.1" 404 8572 "http://localhost:8000/devices" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36" "3.70"

说明转发成功。

V5 官网文档中的也有同样的说明:

dev,test, pre 环境都默认关闭了 mock

ANTD PRO VUE mock 和获取后台数据共用

在配置了 proxy 之后,如果使用

tyarn start

会发现,mock 和真实后台接口在同时使用。非常方便。

参考

  • antd pro V4 的 mock 说明:https://pro.ant.design/docs/mock-api-cn
  • antd pro V5 的 mock 说明:https://beta-pro.ant.design/docs/development-cn

爱评论不评论