面试题：Element UI 如何支持国际化？你如何在一个多语言项目中切换语言？

Element UI 提供了内置的国际化支持，可以轻松实现多语言切换。以下是实现国际化的步骤和示例：

1. Element UI 的国际化支持

Element UI 默认支持多种语言（如中文、英文、日文等），可以通过引入对应的语言包来实现国际化。

安装语言包

Element UI 的语言包已经包含在库中，无需额外安装。

引入语言包

在项目中引入 Element UI 的语言包，并配置 Vue I18n 插件。

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'; // 引入英文语言包
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, { locale }); // 配置 Element UI 使用英文

2. 使用 Vue I18n 实现多语言切换

Vue I18n 是 Vue 的国际化插件，可以与 Element UI 的语言包结合使用。

安装 Vue I18n

npm install vue-i18n

配置 Vue I18n

在项目中配置 Vue I18n，并集成 Element UI 的语言包。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-ui';
import enLocale from 'element-ui/lib/locale/lang/en'; // Element UI 英文语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'; // Element UI 中文语言包
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VueI18n);
Vue.use(ElementUI);

// 定义语言包
const messages = {
  en: {
    message: {
      hello: 'Hello World',
    },
    ...enLocale, // 合并 Element UI 的英文语言包
  },
  zh: {
    message: {
      hello: '你好，世界',
    },
    ...zhLocale, // 合并 Element UI 的中文语言包
  },
};

// 创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'zh', // 默认语言
  messages,
});

// 配置 Element UI 使用 VueI18n
ElementUI.i18n((key, value) => i18n.t(key, value));

new Vue({
  i18n,
  render: (h) => h(App),
}).$mount('#app');

3. 实现语言切换

通过 Vue I18n 的 locale 属性动态切换语言。

语言切换组件

<template>
  <div>
    <el-select v-model="currentLang" @change="changeLanguage">
      <el-option label="中文" value="zh"></el-option>
      <el-option label="English" value="en"></el-option>
    </el-select>
    <p>{{ $t('message.hello') }}</p>
    <el-button type="primary">{{ $t('el.button.submit') }}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentLang: this.$i18n.locale, // 默认语言
    };
  },
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang; // 切换语言
    },
  },
};
</script>

说明

$t 是 Vue I18n 提供的翻译函数，用于获取当前语言的文本。
el.button.submit 是 Element UI 的国际化键值，会自动根据语言切换。

4. 持久化语言设置

为了在页面刷新后保持语言设置，可以将语言偏好保存到 localStorage 或 Cookie 中。

示例代码

// 在 main.js 中读取语言设置
const savedLang = localStorage.getItem('lang') || 'zh';
const i18n = new VueI18n({
  locale: savedLang,
  messages,
});

// 在语言切换方法中保存语言设置
changeLanguage(lang) {
  this.$i18n.locale = lang;
  localStorage.setItem('lang', lang); // 保存语言设置
}

5. 多语言项目的目录结构

为了便于维护，可以将语言文件按模块拆分。

src/
├── lang/
│   ├── en.js        # 英文语言包
│   ├── zh-CN.js     # 中文语言包
│   └── index.js     # 语言包入口
├── App.vue
└── main.js

语言包示例

// lang/en.js
export default {
  message: {
    hello: 'Hello World',
  },
};

// lang/zh-CN.js
export default {
  message: {
    hello: '你好，世界',
  },
};

// lang/index.js
import en from './en';
import zhCN from './zh-CN';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

export default {
  en: {
    ...en,
    ...enLocale,
  },
  zh: {
    ...zhCN,
    ...zhLocale,
  },
};