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

概要

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

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式