常见问题

常见问题

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

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。如果这里未能解决你的问题，欢迎报告给我们。