【入門】1.5-常見問題

提問之前，請先查閱下面的常見問題。

1. Ant Design React 和 Ant Design Pro 有什麼區別？

可以理解爲 Ant Design React 是一套 React 組件庫，而 Pro 是使用了這套組件庫的完整前端腳手架。

2. 如何使用 Ant Design Pro？

請閱讀文檔開始使用，螞蟻金服內網用戶請閱讀 開始使用（螞蟻金服用戶）。

3. 是否可以在生產環境中使用 Ant Design Pro？

當然可以！Ant Design Pro 基於最新的 antd 版本開發，目前已有多箇中後臺項目正在使用。

4. 如何更新 Ant Design Pro？

• 單獨升級 antd 版本，用於更新基礎組件。
• 比較不同的 Ant Design Pro 版本間的差異，手動修改本地配置。
• 也可以嘗試合併遠程分支：git pull https://github.com/ant-design/ant-design-pro(注意：需要自行解決衝突)。
• 直接在 GitHub 上拷貝最新的典型模板。

5. 如何從服務器請求菜單？

你可以在 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 中定義。（約定式路由不需要，只需頁面真實有效即可）。

6. 如何使用 Umi 約定式路由

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

具體的如何在 pro 中使用約定式路由，可以查看這次提交。

注意：約定式路由比較容易實現菜單和權限的控制，但是要求所有的菜單都必須聲明權限，不然均可以通過直接訪問 url 的方式訪問。

約定式權限的聲明很有趣，你可以聲明如：除某某頁面之外的其他頁面均需要 admin 訪問權限，即可過濾所有的 url。

7. 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"
  }
]

注意：

1. 如果沒有全局安裝，而只是在項目中安裝，要把 umi-serve 命令添加到 package.json 的 script 裏面。
2. build 之後 proxy 無效，不要在 proxy 中配置請求http://localhost:8001/api/users，而是要在 http 請求的時候，直接訪問該地址。如在 src/utils/request.ts 中統一添加請求前綴。

8. 如何關閉頁面權限控制

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

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

詳情可見PR3842。約定式路由，關掉路由權限插件。

9. 如何修改默認 webpack 配置？

詳見 umi 配置。

10. 如何添加 babel 插件？

詳見 umi-babel。

11. 如何使用圖片等靜態資源？

可以直接使用絕對路徑(需要圖牀支持)，若需直接使用本地文件，可按以下方式引入。

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

12. 我的 url 裏怎麼有 # 號？要如何去掉？

請參考文檔前端路由與服務端的結合。

13. 如何代理到後端服務器？

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 後端服務上。

14. 如何添加 scss 支持？

先安裝額外的依賴，

➜ npm i node-sass sass-loader --save

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

{
  "sass": {}
}

詳見 sass。

15. Git commit 時報錯？

腳手架默認開啓了 eslint 代碼風格檢查，請按照提示內容進行修改後重新提交，也可以手動 npm run lint 進行檢查。

16. 站點是否支持國際化？

pro 通過 umi 插件 @umijs/plugin-locale 來實現全球化的功能，詳情請見國際化。

17. npm 安裝 puppeteer 失敗

嘗試使用 tyarn 或者設置環境變量，可以查看這個 issue。

18. English Documentation？

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

19. 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。如果這裏未能解決你的問題，歡迎報告給我們。

20. 切換語言時某些組件語言無法切換

Pro 中使用了 context 來管理語言的動態切換，可以做到無刷新切換語言的效果，但是某些組件優化的比較好，context 修改不會重新渲染組件，或者像 Portal 這樣組件上下文不存在， 所以無法切換。我們可以通過配置的方式來讓頁面重新加載來實現完全重新渲染。

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

// 設置第二個參數爲 true 即可強制刷新
setLocale(key, false);