常见问题

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

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 上拷贝最新的典型模板。

如何从服务器请求菜单？#

只需在 models/menu 中发起 http 请求， menuData 是一个 json 数组。只需服务器返回类似格式的 json 即可。

[
  {
    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 必须要在 routre.config.js 中定义。（约定式路由不需要，只需页面真实有效即可）。

如何使用 Umi 约定式路由#

有时候你可能不想要使用 config/router.config.js 的配置。那你可以考虑 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.js 中统一添加请求前缀。

如何关闭页面权限控制#

配置式路由，删除 config/router.config.js 中的 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 devServer来支持代理。你只需要在 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 预览。

如何添加 scss 支持？#

先安装额外的依赖，

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

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

{
  "sass": {}
}

详见 sass。

Git commit 时报错？#

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

站点是否支持国际化？#

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

npm 安装 puppeteer 失败#

尝试使用 cnpm 或者设置环境变量，可以查看这个 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.js 中添加 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。如果这里未能解决你的问题，欢迎 报告给我们。

更新日志设计资源