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

2,718 阅读1分钟

主要问题:ant-design-pro v5启用mock数据,在config/proxy.ts中配置真实地址无效

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

V5 的文档:beta-pro.ant.design/docs/develo…

禁用掉 Mock 数据

tyarn start:no-mock

实际使用配置

启动参数对应的配置在 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",

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

dev: {
    '/api/': {
      target: 'https://localhost:8080/',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },

然后使用 dev 启动服务:

tyarn start:dev

然后就可以使用真实接口数据。 V5 官网文档中的也有同样的说明:

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