一：概述

在当今全球化的背景下，多语言支持已成为现代Web应用的标配。本文将详细介绍如何在Vue 3结合Element UI框架中实现双语切换功能，包括具体的实现步骤和代码示例。

二：概述

<1>使用vue-i18n插件

1. 安装依赖

首先，你需要安装vue-i18n插件来支持国际化。

npm install vue-i18n@next --save

2. 创建语言文件

在项目中创建一个locales文件夹，然后在里面创建两个文件：en.js和zh.js，分别用于存储英文和中文的翻译。

locales/en.js
export default {
  message: {
    hello: 'Hello, world!'
  },
  button: {
    submit: 'Submit'
  },
};
locales/zh.js
export default {
  message: {
    hello: '你好，世界！'
  },
  button: {
    submit: '提交'
  },
};

3. 配置vue-i18n

在main.js或main.ts文件中配置vue-i18n。

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const messages = {
  en: en,
  zh: zh
};

const i18n = createI18n({
  locale: 'zh',
  messages,
});

const app = createApp(App);
app.use(i18n);
app.use(ElementPlus);
app.mount('#app');

4. 使用vue-i18n进行翻译

在你的Vue组件中使用$t方法进行翻译。

App.vue
<template>
<div>
  <h1>{{ $t('message.hello') }}</h1>
  <el-button>{{ $t('button.submit') }}</el-button>
  <el-select v-model="currentLocale" @change="changeLocale">
    <el-option label="English" value="en"></el-option>
    <el-option label="中文" value="zh"></el-option>
  </el-select>
</div>
</template>

<script>
export default {
  data() {
    return {
      currentLocale: this.$i18n.locale,
    };
  },
  methods: {
    changeLocale() {
      this.$i18n.locale = this.currentLocale;
    }
  }
};
</script>

5. 配置Element Plus国际化

为了让Element Plus的组件也支持国际化，你需要在main.js或main.ts中配置Element Plus的国际化。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/index';
import i18n from './i18n/i18n';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import './styles/index.scss';

createApp(App)
  .use(store)
  .use(router)
  .use(i18n)
  .use(ElementPlus, {
    i18n: (key, value) => i18n.t(key, value),
  })
  .mount('#app');

<2>手动切换语言

1. 准备语言资源文件

与方法一类似，你需要准备中英语言资源文件，并在main.js中引入。

2. 创建语言切换组件

你可以创建一个语言切换组件，当用户选择不同的语言选项时，调用changeLanguage方法，该方法会修改$i18n实例的locale属性，从而实现语言切换。

LanguageSwitcher.vue
<template>
  <div class="language drop_down">
    <el-popover width="260" trigger="click">
      <template #reference>
        <div class="reference_btn">
          <SvgIcon name="select_lang"></SvgIcon>
          <span class="current_language">{{ current_language }}</span>
        </div>
      </template>
      <div class="category_btn_cate">
        <el-checkbox-group v-model="checkList_status" @change="ChangeLanguage">
          <el-checkbox size="small" v-for="item in langList" :key="item.category" :value="item.category">
            {{ item.lang }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      langList: [
        { category: 'en', lang: 'English', el_lang: 'en' },
        { category: 'zh', lang: '中文', el_lang: 'zh' },
      ],
      checkList_status: [],
      current_language: 'English',
    };
  },
  methods: {
    ChangeLanguage(value) {
      const langObj = this.langList.find((lang) => lang.category === value);
      if (langObj) {
        this.$i18n.locale = langObj.category;
        this.current_language = langObj.lang;
      }
    },
  },
};
</script>

3. 切换语言

在组件中，你可以使用$i18n来动态切换语言，并通过监听语言变化来更新Element UI的语言设置。

<3>总结

通过上述两种方法，你可以在Vue 3结合Element UI的项目中实现双语切换功能。第一种方法使用vue-i18n插件，它提供了一个完整的国际化解决方案，包括语言文件的管理和语言切换的实现。第二种方法则是手动切换语言，通过监听语言变化来更新界面和Element UI的语言设置。这两种方法各有优势，可以根据项目需求和个人喜好选择适合的方法。