常見問題 · Ant Design Pro v4 Doc

--- order: 22 title: 常見問題 type: 入門 --- 提問之前，請先查閱下面的常見問題。 ### Ant Design React 和 Ant Design Pro 有什么區別？可以理解為 Ant Design React 是一套 React 組件庫，而 Pro 是使用了這套組件庫的完整前端腳手架。 ### 如何使用 Ant Design Pro？請閱讀文檔 [開始使用](/docs/getting-started)，螞蟻金服內網用戶請閱讀 [開始使用（螞蟻金服用戶）](/docs/getting-start-inner)。 ### 是否可以在生產環境中使用 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](https://github.com/ant-design/ant-design-pro/blob/4420ae2c224144c4114e5384bddc3e8ab0e1dc1c/src/layouts/BasicLayout.tsx#L116) 中修改 `menuDataRender`，并在代碼中發起 http 請求，只需服務器返回下面格式的 json 即可。 ```jsx 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](https://github.com/ant-design/ant-design-pro-layout/blob/56590a06434c3d0e77dbddcd2bc60827c9866706/src/typings.ts#L18). ```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 必須要在 config.ts 中定義。（約定式路由不需要，只需頁面真實有效即可）。 ### 如何使用 Umi 約定式路由有時候你可能不想要使用 config/config.ts 的配置。那你可以考慮 umi 的[約定式路由](https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1)。具體的如何在 pro 中使用約定式路由，可以查看這次[提交](https://github.com/ant-design/ant-design-pro/commit/a22d400328a7a391ed5e5a5f2bba1a5fecf9fad7)。 > 注意：約定式路由比較容易實現菜單和權限的控制，但是要求所有的菜單都必須聲明權限，不然均可以通過直接訪問 url 的方式訪問。 > 約定式權限的聲明很有趣，你可以聲明如：除某某頁面之外的其他頁面均需要 admin 訪問權限，即可過濾所有的 url。 ### build 之后如何使用 mock 數據？可以使用 [umi-serve](https://www.npmjs.com/package/umi-serve) ，在項目中或者全局安裝 umi-serve。 ```sh $ yarn global add umi-serve ``` 在項目根目錄中運行 umi-serve ```sh $ 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`。 ```json [ { "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`](https://github.com/ant-design/ant-design-pro/blob/80ce8fe43746426abc054c1cf76b8f733f54b001/src/utils/request.ts) 中統一添加請求前綴。 ### 如何關閉頁面權限控制配置式路由，刪除 `config/config.ts` 中的 `Routes: ['src/pages/Authorized']` 配置。 ```diff { path: '/', component: '../layouts/BasicLayout', - Routes: ['src/pages/Authorized'], routes: [] ... } ``` 詳情可見[PR3842](https://github.com/ant-design/ant-design-pro/pull/3842)。約定式路由，關掉路由權限插件。 ### 如何修改默認 webpack 配置？詳見 [umi 配置](https://umijs.org/zh/config/)。 ### 如何添加 babel 插件？詳見 [umi-babel](https://umijs.org/zh/api/#umi-babel)。 ### 如何使用圖片等靜態資源？可以直接使用絕對路徑（需要圖床支持），若需直接使用本地文件，可按以下方式引入。 ```jsx <img src={require('../assets/picture.png')} /> ``` ### 我的 url 里怎么有 `#` 號？要如何去掉？請參考文檔 [前端路由與服務端的結合](/docs/deploy#前端路由與服務端的結合)。 ### 如何代理到后端服務器？ Ant Design Pro 內置了 umi，umi 使用了 webpack [devServer](https://webpack.docschina.org/configuration/dev-server/)來支持代理。你只需要在 config.js 中配置 proxy 屬性。只要 proxy 和 mock url 不同，是可以共存的。 ```js { ... 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 支持？先安裝額外的依賴， ```bash $ npm i node-sass sass-loader --save ``` 然后修改 `.umirc.js`或者`config/config.ts`: ```json { "sass": {} } ``` 詳見 [sass](https://umijs.org/zh/guide/faq.html#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-sass-%EF%BC%9F)。 ### Git commit 時報錯？ <img src="https://gw.alipayobjects.com/zos/rmsportal/KkPUhMMpGtEdhSGfxxKz.png" width="600" /> 腳手架默認開啟了 [eslint](http://eslint.org/) 代碼風格檢查，請按照提示內容進行修改后重新提交，也可以手動 `npm run lint` 進行檢查。 ### 站點是否支持國際化？ pro 通過 umi 插件 [umi-plugin-locale](https://github.com/umijs/umi-plugin-locale) 來實現全球化的功能，詳情請見 [國際化](/docs/i18n)。 ### npm 安裝 puppeteer 失敗嘗試使用 tyarn 或者設置環境變量，可以查看這個 [issue](https://github.com/cnpm/cnpmjs.org/issues/1246)。 ### English Documentation？ English Documentation will be translated in next couple of monthes， trace [ant-design/ant-design-pro#54](https://github.com/ant-design/ant-design-pro/issues/54#issuecomment-340804479) 和 [ant-design-pro/issues/120](https://github.com/ant-design/ant-design-pro/issues/120) 了解更多細節。 ### Ant Design Pro 從 1.X 升級到 2.X 以及之后版本，頁面進行重定向（redirect）時，頁面布局組件（如 BasicLayout）會重新加載在 config.ts 中添加 `disableRedirectHoist: true` 配置： ```diff 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](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) 和 [umi](https://github.com/umijs/umi)。如果這里未能解決你的問題，歡迎 [報告給我們](https://github.com/ant-design/ant-design-pro/issues)。