背景

开发前端项目，为了提高开发效率以及统一样式风格，一般都会用到UI组件库或者在组件库的基础上进行二次封装。这里开发的vue3 + ts项目就引入了element plus组件库，我们知道element plus默认的是英文的，那么如果想改为中文，就要进行一些设置。

设置前

有些文本是英文描述的，比如分页器组件

设置后

如何进行设置

1.在App.vue文件中

<template>
    <el-config-provider :locale="locale">
        <router-view></router-view>  // 根据自己项目情况，把主要内容用el-config-provider包裹
    </el-config-provider>
</template>
<script lang="ts" setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
</script>

2.如果是ts的项目，还需要多一步设置。ts会报element-plus/dist/locale/zh-cn.mjs没有声明，需要在根目录的env.d.ts文件进行声明。

declare module 'element-plus/dist/locale/zh-cn.mjs'

总结

到此就把element plus默认的英文改为中文设置啦！