vue3(element-plus)+多语言切换实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

我们公司的客户有国内客户和国外客户，需要个国际化系统，要设置多语言，所以针对此情况在原有的基础上增加了中英文切换功能，Vue3采用的是vue-i18n来实现国际化的功能。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue-i18n是什么？

所谓的vuei18n国际化方案简而言之就是根据它的规则自己建立一套语言字典对于每一个字message都有一个统一的标识符我们直接在文中使用该标识符代替原来固定的某一语言，会自动转换为需要查看的语言。

二、使用步骤

1.安装引入

代码如下（示例）：

npm install i18n
npm install i18n -save

cnpm i vue-i18n -S
1
2
3
4

2.配置

在src下新建locals文件夹,包含index.js,en.js,zh-cn.js(只做中英文切换)

3.使用

在中使用
要用到一个$t()的方法，或者使用v-t也行
代码如下（示例）：

<div>
    {{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>
1
2
3
4

4.切换语言

<template>
    
    <el-dropdown style='line-height:50px;' ref="localePicker" trigger="click" @command="changeLocale">
      <div class="local-label">
        {{currentLocaleLabel}}<el-icon class="el-icon--right"><ArrowDown /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
            <template v-for="item in localeList" :key="item.key">
                <el-dropdown-item :command="item.key" v-if="item.key!=currentLocaleKey">
                    {{item.label}}
                </el-dropdown-item>
            </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  
</template>
<script setup>
import { computed, nextTick } from 'vue'
import { useStore } from 'vuex'
import {localeList} from '@/locale'
import { useRoute } from 'vue-router'
import config from '@/config'
import i18n from '@/locale'
const store=useStore()

const currentLocaleKey=computed(()=>store.state.locale.key);
const currentLocaleLabel=computed(()=>{
    return localeList.find(a=>a.key==currentLocaleKey.value).label
})
const route=useRoute()
function changeLocale(key) {
    store.commit('setLocale',key)
    nextTick().then(()=>{
        setTimeout(()=>{
            document.title = route.meta.title ? `${i18n.global.t(route.meta.title,key)} - ${config.system.APP_NAME}` : `${config.system.APP_NAME}`
        },10)
    })
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

5.配置动态菜单

切换中文

切换英文

---

总结

记录点点滴滴