vue element-plus 集成多语言

main.js中

// 引入i18n

import i18n from '@/i18n/index'

使用i18

app.use(i18n)

在App.vue中

<template><el-config-provider :locale="locale" namespace="el" size="small"><router-view /></el-config-provider>
</template><script setup>import { useLanguageStore } from "@/store/modules/language";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import ru from "element-plus/dist/locale/ru.mjs";const languageStore = useLanguageStore();const locale = computed(() => {switch (languageStore.language) {case "zh":return zhCn;case "en":return en;case "ru":return ru;default:return zhCn; // 默认返回中文}
});</script>

store

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useLanguageStore = defineStore('language', () => {// 状态const language = ref(localStorage.getItem('lang') || 'zh')// 操作const setLanguage = (lang) => {language.value = langlocalStorage.setItem('lang', lang)}return {language,setLanguage}
})

i18配置

index.ts

import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh-CN'
import en from './lang/en'
import ru from './lang/ru'
const i18n = createI18n({legacy: false, // 启用 composition API 模式locale: sessionStorage.getItem('localeLang') || 'zhCN',messages: {zhCN,en,ru,},
})export default i18n;

ru.ts

// ru.js 俄语语言文件
export default {common: {yes: 'Да',no: 'Нет',requestFailed: 'Ошибка запроса',operationSuccess: 'Операция выполнена успешно',operationFailed: 'Ошибка выполнения операции',switchLanguage: 'Переключить язык'},login: {login: 'Войти',loggingIn: 'Вход в систему...',username: 'Имя пользователя',password: 'Пароль',rememberPwd: 'Запомнить меня',forgotPwd: 'Забыли пароль?',noAccount: 'Нет аккаунта?',registerNow: 'Зарегистрироваться',agreeAgreement: 'Я прочитал и согласен с',agreement: 'Пользовательским соглашением',phone: 'Номер телефона',code: 'Код подтверждения',sendCode: 'Отправить код',resendCode: 'Отправить повторно',countdown: 'сек до повтора',loginAccount: 'Вход по аккаунту',loginPhone: 'Вход по телефону',inputUsername: 'Введите имя пользователя',inputPassword: 'Введите пароль',inputPhone: 'Введите номер телефона',inputRightPhone: 'Введите корректный номер телефона',inputCode: 'Введите код подтверждения',inputRightCode: 'Введите корректный код подтверждения',loginSuccess: 'Вход выполнен успешно',forceLoginTitle: 'Принудительный вход?',forceLoginContent: 'Этот аккаунт уже используется на другом устройстве. Выполнить принудительный вход?',codeSent: 'Код подтверждения отправлен',invalidPhoneFormat: 'Неверный формат номера телефона',agreeFirst: 'Сначала примите пользовательское соглашение',copyright: '© 2024-2025 docod.cloud Все права защищены.'},validation: {required: 'Поле {field} обязательно',phoneInvalid: 'Неверный формат номера телефона',agreementRequired: 'Необходимо принять пользовательское соглашение'}
}

zh-cn.ts和en.ts 也是一样
 

在切换的LanguageSwitcher中

<template><el-dropdown trigger="click" @command="handleLanguageChange"><el-button type="text" class="lang-switcher">{{ languageText[currentLanguage] }}<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="zh" :disabled="currentLanguage === 'zh'">中文</el-dropdown-item><el-dropdown-item command="en" :disabled="currentLanguage === 'en'">English</el-dropdown-item><el-dropdown-item command="ru" :disabled="currentLanguage === 'ru'">Русский</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
</template><script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import { useLanguageStore } from "@/store/modules/language";const { locale } = useI18n();
const languageStore = useLanguageStore();// 语言显示文本
const languageText = {zh: "中文",en: "EN",ru: "RU",
};// 语言切换提示
const languageMessages = {zh: "语言已切换为中文",en: "Language switched to English",ru: "Язык изменен на русский",
};// 从 Pinia 获取当前语言
const currentLanguage = computed(() => languageStore.language);// 初始化设置语言
locale.value = currentLanguage.value;// 切换语言
const handleLanguageChange = (language) => {languageStore.setLanguage(language);locale.value = language;ElMessage.success(languageMessages[language]);
};
</script><style scoped>
.lang-switcher {padding: 0 12px;color: var(--el-text-color-regular);font-size: 14px;display: inline-flex;align-items: center;
}
.lang-switcher:hover {color: var(--el-color-primary);
}
</style>

效果如下