element-plus component library language switching

introduction

The element-plus component library uses English by default , so when you need to switch to Chinese, you need to configure the language of the component library.

1. Global configuration

If element-plus uses global import, use the following method to switch languages.

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

app.use(ElementPlus, {
    
     locale: zhCn })

2. Import on demand

If element-plus uses on-demand import, use the following method to switch languages.

// 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>

Precautions

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

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

element-plus completes the above configuration and switches the component library language to Chinese.