概要
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 聊聊, 查看更多联系方式