踩坑记录（DatePicker 日期国际化错误 中英文都存在）

第99999999号韭菜
1,177 阅读2分钟

背景

手上的一个项目，使用umi-qiankun构建的微前端项目。一个版本提测发现几个模块的 DatePicker 日期显示有的是中文有的是英文。

问题现状

代码层

两个子应用代码实现是一样的，都已经配置了国际化

使用的是 antd 组件库的 ConfigProvider全局化配置

代码如下


import ZH_CN from 'antd/lib/locale/zh_CN'
import {ConfigProviderProps} from 'antd/lib/config-provider/index'

const App = () => {
  return (
    <ConfigProvider locale={ZH_CN}>
      <div className={styles.content}>{props.children}</div>
    </ConfigProvider>
  )
}

引用的依赖库 antd 的版本也没差别

image.png

但是表现不一样

表现层

这个异常面板的月份和星期都是英文

正常中文版

image.png

异常显示

image.png

咋办

猜-组件库版本问题

因为前段时间我统一把应用的antd都升级过，以为是版本原因。就去对比了一下这个版本差异，发现这个zh-cn的文件配置引用路径不一样,一个'antd/lib/locale-provider/zh_CN'一个'antd/lib/locale/zh_CN',尝试后不行。不过也是，这个引用只需要路径能够找到源文件配置问题就不大。

猜-时间转换插件问题

  1. 我开始怀疑是不是组件库版本替换了时间处理插件，比如moment换成了dayJs.尝试后发现不是这个原因
  2. antd社区有人发言不仅需要配置antd国际化，还要配置moment的语言设置
import moment from "moment";  
import "moment/locale/zh-cn";  
moment.locale("zh-cn");

当然，尝试也没用。还纠结是不是moment和antd版本不对应关系

最终

总结

还是要沉心静气，好好看社区。毕竟这么多开发者肯定有比你先行者！！！

看到了一个大哥提供信息(反手就是一个赞)

umi配置的文件配置了 ignoreMomentLocale: true后，会把中文在内的国际化去除，所以配置国际化中文后还是无法生效。想用于减少尺寸，忽略moment的locale文件。

后来翻看几个项目配置对比，有项目走了的前辈优化代码没有几个项目统一，只有两个配置了。。。 ———————————————————————————————————

话说听过《你是人间四月天》嘛？

愿你在我看不到的地方安然无恙

愿你的冬天永远不缺暖阳

希望写代码的你们一切都好哇！

avatar
文章
阅读
粉丝