Vue3 Element-plus语言与项目国际化-完整实现

介绍：项目的国际化和Element-plus国际化是分开配置的。

1.安装插件

安装 i18n

npm install i18n

安装 vue-i18n

npm install vue-i18n

 

2.文件配置

当前案例实现的是中文和英文两种语言的切换，以下文件只配置两种语言，你可以根据自己实际情况配置更多语种

2.1 新建 lang 文件夹 

在 src 文件夹在新建  lang 文件夹，文件夹内分别新建 index.js、 en.js、 zh.js 三个 js 文件，如下

 ├── src                                   
│   │── lang  [国际化文件夹]                          
│   │   │── index.js  [输出文件]                                        
│   │   │── zh.js  [中文]                                          
│   │   │── en.js     [英文]
|   |——utils[工具库文件]
|   |   |——watchLang.js [监控语言发生变化]

2.2 文件夹配置

在 zh.js  文件中写入

export default {
  menuindex: '首页'
};

 在 en.js 文件中写入

export default {
  menuindex: 'Home'
};

 在 index.js 文件中写入

import { createI18n } from "vue-i18n";
import zh from "./zh.js"
import en from "./en.js";
const i18n = createI18n({
  locale: localStorage.getItem("lang") || "zh",
  legacy: false,
  globalInjection: true,
  messages: {
    zh: {
      ...zh,
    },
    en: {
      ...en,
    },
  }
});
export { i18n };

在main.ts加入以下语句

import { i18n } from '@/lang/index';
app.use(i18n)

在 watchLang.js 文件中写入

/* 监听语言Elementplus 语言 变化 */
export  const localsChangedNotify = (value) => {
    const event = new CustomEvent("onLocalsChanged", { detail: value });
    window.dispatchEvent(event);
  };

  /* 设置localStorage locale 语言版本  */
  export const languageSet = () => {
    if (localStorage.getItem("lang")) {
      return localStorage.getItem("lang");
    }
    return localStorage.setItem("lang", "zh");
  };

3.使用方法

如以上的配置你准确无误的配置好了，那么你可以在你的 `vue` 文件的 `template` 标签中使用 `$t()` 了

<template>
{{ $t('menuindex') }}
<template>

直接使用$t就可以使用了

4.语言切换

语言切换包括两点:

一、我们自己配置的语言切换

二、element-plus 组件语言的切换

4.1 在切换语言的 vue 文件的 template 标签内

 此处可根据实际 ui 自定义你自己的标签

<el-dropdown >
  <span class="language">{{ locale === 'en' ? '英文' : '中文' }}</span>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item command="中文" @click="changeLang('zh')">中文</el-dropdown-item>
      <el-dropdown-item command="英文" @click="changeLang('en')">英文</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

.2 在切换语言的 vue 文件的 script 标签内

import { languageSet,localsChangedNotify } from '@/utils/watchLang'; 
import { useI18n } from "vue-i18n";
const language = ref(languageSet());
const { locale } = useI18n();

/* 语言切换方法 */
const changeLang = (val) => {
  console.log(locale.value);
    locale.value = val === 'zh' ? 'zh' : val;
    localStorage.setItem("lang", val);
    localsChangedNotify(val)
};

5.Element-plus组件语言切换

以上步骤你会发现一些持久化配置代码已经有在写了，但是切换的时候好像 element-plus 组件的语言没有跟随切换，我们还缺少这一步

在 app.vue 文件中写入以下代码

<template>
  <el-config-provider :locale="locale">
  <RouterView />
</el-config-provider>
</template>
<script setup lang="ts">
import {  RouterView } from 'vue-router'
import {ElConfigProvider} from 'element-plus'
import {ref,computed} from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import { languageSet } from './utils/watchLang'

const language = ref(languageSet());
const locale = computed(() => (language.value === "zh" ? zhCn : en));
// 监听语言的切换，设置 language 值，从而实现 elementPlus 组件语言的切换
window.addEventListener("onLocalsChanged", (e: any) => {
  language.value = e.detail;
  console.log(language.value);
});
console.log(locale.value);
</script>
<style >
</style>

结语

前端国际化已经是很常见的开发需求了，所以也是作为一个前端开发工程师应有的必备技能。而项目完整的国际化是涉及常规内容的国际化和组件的国际化的，并且有持久化的应用场景需求的。

如果你能跟着步骤实现项目的持久化功能，请为我点赞

欢迎大家的及时指正，共同进步