element-plus语言

element-plus修改语言报错

无法找到模块“element-plus/dist/locale/zh-cn.mjs”的声明文件

问题原因

element-plus官方语言默认为英语

如果按照element官网示例引入/修改 element 语言，ts 会报错，并且引入的 zhCn 没有代码提示

解决方法

1. 如果只是不希望出现报错

在 .d.ts 文件中（如：vite在 vite-env.d.ts 文件）添加代码：

// 一行代码搞定,很轻松
declare module "element-plus/dist/locale/zh-cn.mjs";

2. 如果希望还能出现代码提示

直接上结论

// 官网引入地址修改为
import zhCn from "element-plus/es/locale/lang/zh-cn";
// 还可以根据项目需要修改文本

问题解决过程

1. 起初是想将 el-pagination 分页器中的 "共 10 条" 修改为 "共 10 条数据"

   方法有很多，第一时间就想到用伪元素 ::after 加上

   但是想到如果别的地方不只是简单地添加文本，而是修改，伪元素就不可行

   所以还是直接修改element语言包里面的配置

2. 按照element官方文档提示确实能够修改，但是有两个问题

   1. 引入报错，虽然不影响编译，但是看着难受
   2. 没有代码提示，需要 log 出来才能看到里面的数据结构

3. 我不相信 element 团队在开发时没有代码提示，于是好奇心驱使下，想去看看 element 源码是怎么写的，在 volar 的帮助下找到了这个文件

   node_modules/element-plus/es/components/pagination/src/components/total2.mjs
   

   里面有一段 render 函数是这样的

   

   // toDisplayString即template语法中的{{}}
   <span>{{value}}</span> === toDisplayString(value)
   // unref(val): 如果对象是ref对象,val.value,如果不是,取val
   
   很明显,这里就是total文本渲染的地方
   这里 unref 包裹了一个 t 函数,我们可以看到 t 是由一个 useLocale 函数构造出来的
   locale 这个单词在之前的引入语言包路径中出现过,所以这个函数应该和语言有关
   

4. 继续顺藤摸瓜看看声明 useLocale 所在的文件

   

   这里引入了英语的语言包，没有报错而且有代码提示！

   然后在English的同级目录下看到了 en.d.ts 这也解释了为什么没有报错和有代码提示

   

5. 可以看到，这里有很多种语言包，当然也有中文的，所以我们引入这里的中文包就可以了

   import zhCn from "element-plus/es/locale/lang/zh-cn";