常见问题

上次修改时间：2021-07-02 10:46:74

提问之前，请先查阅下面的常见问题。

Ant Design Pro 使用 Umi 作为开发工具，建议你先查看 Umi 的常见问题。

Ant Design React 和 Ant Design Pro 有什么区别？

可以理解为 Ant Design React 是一套 React 组件库，而 Pro 是使用了这套组件库的完整前端脚手架。

如何使用 Ant Design Pro？

请阅读文档 开始使用，蚂蚁金服内网用户请阅读 开始使用（蚂蚁金服用户）。

是否可以在生产环境中使用 Ant Design Pro？

当然可以！Ant Design Pro 基于最新的 antd 版本开发，目前已有多个中后台项目正在使用。

如何更新 Ant Design Pro？

  • 单独升级 antd 版本，用于更新基础组件。
  • 比较不同的 Ant Design Pro 版本间的差异，手动修改本地配置。
  • 也可以尝试合并远程分支：git pull https://github.com/ant-design/ant-design-pro（注意，需要自行解决冲突）。
  • 直接在 GitHub 上拷贝最新的典型模板。

如何从服务器请求菜单？

你可以在 src/layouts/BasicLayout.tsx 中修改 menuDataRender，并在代码中发起 http 请求，只需服务器返回下面格式的 json 即可。

const [menuData, setMenuData] = useState([]);

useEffect(() => {
  // 这里是一个演示用法
  // 真实项目中建议使用 dva dispatch 或者 umi-request
  fetch('/api/example.json')
    .then(response => response.json())
    .then(data => {
      setMenuData(data || []);
    });
}, []);

...

return (
  <ProLayout
    ...
    menuDataRender={() => menuData}
    ...
  />
);

menuData 数据格式如下，ts 定义在此：MenuDataItem.

[
  {
    path: '/dashboard',
    name: 'dashboard',
    icon: 'dashboard',
    children: [
      {
        path: '/dashboard/analysis',
        name: 'analysis',
        exact: true,
      },
      {
        path: '/dashboard/monitor',
        name: 'monitor',
        exact: true,
      },
      {
        path: '/dashboard/workplace',
        name: 'workplace',
        exact: true,
      },
    ],
  }
  ....
]

注意 path 必须要在 config.ts 中定义。（约定式路由不需要，只需页面真实有效即可）。

如何使用 Umi 约定式路由

有时候你可能不想要使用 config/config.ts 的配置。那你可以考虑 umi 的约定式路由。

具体的如何在 pro 中使用约定式路由，可以查看这次提交。

注意：约定式路由比较容易实现菜单和权限的控制，但是要求所有的菜单都必须声明权限，不然均可以通过直接访问 url 的方式访问。

约定式权限的声明很有趣，你可以声明如：除某某页面之外的其他页面均需要 admin 访问权限，即可过滤所有的 url。

build 之后如何使用 mock 数据？

可以使用 umi-serve ，在项目中或者全局安装 umi-serve。

$ yarn global add umi-serve

在项目根目录中运行 umi-serve

$ umi-serve

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving your umi project!                        │
   │                                                    │
   │   - Local:            http://localhost:8001        │
   │   - On Your Network:  http://134.160.170.40:8001   │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

修改项目中的请求地址，如 http://localhost:8001/api/users。

[
  {
    "key": "1",
    "name": "John Brown",
    "age": 32,
    "address": "New York No. 1 Lake Park"
  },
  {
    "key": "2",
    "name": "Jim Green",
    "age": 42,
    "address": "London No. 1 Lake Park"
  },
  {
    "key": "3",
    "name": "Joe Black",
    "age": 32,
    "address": "Sidney No. 1 Lake Park"
  }
]

注意：如果没有全局安装，而只是在项目中安装，要把 umi-serve 命令添加到 package.json 的 script 里面。注意：build 之后 proxy 无效，不要在 proxy 中配置请求http://localhost:8001/api/users，而是要在 http 请求的时候，直接访问该地址。如在 src/utils/request.ts 中统一添加请求前缀。

如何关闭页面权限控制

配置式路由，删除 config/config.ts 中的 Routes: ['src/pages/Authorized'] 配置。

{
    path: '/',
    component: '../layouts/BasicLayout',
-   Routes: ['src/pages/Authorized'],
    routes: []
    ...
}

详情可见PR3842。

约定式路由，关掉路由权限插件。

如何修改默认 webpack 配置？

详见 umi 配置。

如何添加 babel 插件？

详见 umi-babel。

如何使用图片等静态资源？

可以直接使用绝对路径（需要图床支持），若需直接使用本地文件，可按以下方式引入。

<img src={require('../assets/picture.png')} />

我的 url 里怎么有 # 号？要如何去掉？

请参考文档 前端路由与服务端的结合。

如何代理到后端服务器？

Ant Design Pro 内置了 umi，umi 使用了 webpack-dev-server 来支持代理。你只需要在 config.js 中配置 proxy 属性。只要 proxy 和 mock 的 url 不同，是可以共存的。

{
  ...
  proxy:{
    '/server/api/': {
      target: 'https://preview.pro.ant.design/',
      changeOrigin: true,
      pathRewrite: { '^/server': '' }, // /server/api/currentUser -> /api/currentUser
    },
  },
  ...
}

在浏览器中输入 http://localhost:8000/server/api/currentUser 预览。注意，配置了 proxy 之后，本地浏览器内的请求路径不会变（依然是 localhost），但是发送的请求会被反向代理的你配置的 target 后端服务上。

如何添加 scss 支持？

先安装额外的依赖，

$ npm i node-sass sass-loader --save

然后修改 .umirc.js或者config/config.ts:

{
  "sass": {}
}

详见 sass。

Git commit 时报错？

脚手架默认开启了 eslint 代码风格检查，请按照提示内容进行修改后重新提交，也可以手动 npm run lint 进行检查。

站点是否支持国际化？

pro 通过 umi 插件 @umijs/plugin-locale 来实现全球化的功能，详情请见 国际化。

npm 安装 puppeteer 失败

尝试使用 tyarn 或者设置环境变量，可以查看这个 issue。

English Documentation？

English Documentation will be translated in next couple of monthes， trace ant-design/ant-design-pro#54 和 ant-design-pro/issues/120 了解更多细节。

Ant Design Pro 从 1.X 升级到 2.X 以及之后版本，页面进行重定向（redirect）时，页面布局组件（如 BasicLayout）会重新加载

在 config.ts 中添加 disableRedirectHoist: true 配置：

export default {
    ...
+   disableRedirectHoist: true,
    ...
}

This is a problem introduced using the umijs framework. For details, please refer to [Official Document] of umijs (https://umijs.org/zh/config/#disableredirecthoist).

更多常见问题可以查看 Trouble Shooting 和 umi。如果这里未能解决你的问题，欢迎 报告给我们。

切换语言时某些组件语言无法切换

Pro 中使用了 context 来管理语言的动态切换，可以做到无刷新切换语言的效果，但是某些组件优化的比较好，context 修改不会重新渲染组件，或者像 Portal 这样组件上下文不存在， 所以无法切换。我们可以通过配置的方式来让页面重新加载来实现完全重新渲染。

import { setLocale } from 'umi-plugin-react/locale';

// 设置第二个参数为 true 即可强制刷新
setLocale(key, false);
可用的脚本
布局