天天看點

umi + react+antd遇到的問題

Q1:antd下拉選項偏移,如何固定?

使用getPopupContainer屬性

umi + react+antd遇到的問題

 Q2:antd表格table設定width不起效,原因?解決方法?

原因:若目前column字段為超長連續單詞或數字就會破壞表格布局。

解決方法:

可為其他column加上寬度,在表格上加上style:style={{ wordBreak: 'break-all' }},為了美觀,還可以給超長連續單詞column加上ellipsis屬性

umi + react+antd遇到的問題
umi + react+antd遇到的問題

  Q3:umi更改生成檔案的hash值,隻添加其他異步檔案的hash值,不更改umi.js主檔案的hash值

umi定義了dynamicImport:{}就會按需加載,減少首屏加載體積,就會生成多個js檔案,有時在後端部署模闆時需引入主js檔案,主js檔案引入其他檔案,為了能及時擷取到最新資源,就需要其他檔案配上hash值。

生成多個js檔案:

umi + react+antd遇到的問題

全部帶上hash值:

umi + react+antd遇到的問題

 主檔案umi.js不帶hash值,其他檔案帶hash值,webpack配置:

umi + react+antd遇到的問題
umi + react+antd遇到的問題

 Q4:去掉umi加載頁面前自帶loading樣式,或自定義loading樣式

在dynamicImport屬性中,有loading配置項,可以配置自定義loading。

umi + react+antd遇到的問題

目前我配置的是為了去掉預設loading

umi + react+antd遇到的問題

  Q5:umi配置404頁面

  umi配置404頁面需要在umi規定的路由pages,下建立404.tsx,此頁面裡的極為預設404元件。在routes.js 路由配置檔案中,會有404頁面,無需配置path。

umi + react+antd遇到的問題
umi + react+antd遇到的問題

   Q6:umi修改路由為hash模式的

  umi預設路由模式為browser模式,想修改路由模式,需在history選項中設定

umi + react+antd遇到的問題

  Q7:umi如何全部自動導入公共css樣式檔案

   需要webpack配置:

umi + react+antd遇到的問題