介绍:项目的国际化和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>
结语
前端国际化已经是很常见的开发需求了,所以也是作为一个前端开发工程师应有的必备技能。而项目完整的国际化是涉及常规内容的国际化和组件的国际化的,并且有持久化的应用场景需求的。
如果你能跟着步骤实现项目的持久化功能,请为我点赞
欢迎大家的及时指正,共同进步