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 = lang
        localStorage.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>

效果如下