element-plus 组件库语言切换_import zhcn from 'element-plus/dist/locale/zh-cn.m

引言

element-plus 组件库默认使用 英文，因此当需要切换成中文，就需要对组件库进行语言配置

1.全局配置

element-plus 使用的是全局导入的话，使用下面方法进行语言切换

import ElementPlus from 'element-plus'
// 中文文件
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, { locale: zhCn })
1
2
3
4
5

2.按需导入

element-plus 使用的是按需导入的话，使用下面方法进行语言切换

// App.vue
<template>
  <div id="app">
  	// el-config-provider 是 element-plus 提供用于全局配置国际化
    <el-config-provider :locale="locale">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
const locale = zhCn;
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意事项

项目如果使用的是 ts，则需要对 'element-plus/dist/locale/zh-cn.mjs' 进行声明

在项目的 .d.ts 文件中输入 declare module 'element-plus/dist/locale/zh-cn.mjs';
1
2
3

element-plus 完成以上配置，组件库语言切换成中文