在当今全球化的互联网环境下，许多 Vue 2 + Element UI 项目都需要支持多语言切换功能，以满足不同地区用户的需求。其中，中英双语切换是较为常见的需求。本文将详细介绍如何在 Vue 2 + Element UI 项目中实现这一功能，让你的应用轻松走向国际化。
一、准备语言资源文件
首先，我们需要创建语言资源文件来存储中英双语的文本内容。在项目的 src 目录下，新建一个 lang 文件夹。在这个文件夹中，分别创建 en.js（英语资源文件）和 zh.js（中文资源文件）。
en.js 文件示例：
export default {
home: {
welcome: 'Welcome to our application',
home: 'Home',
about: 'About',
contact: 'Contact'
},
};zh.js 文件示例：
export default {
home: {
welcome: '欢迎来到我们的应用',
home: '首页',
about: '关于',
contact: '联系我们'
},
};这里我们只是简单列举了几个常见的页面元素文本，在实际项目中，需要根据项目的具体功能和界面来完善这些资源文件。最好以页面来区分，方便后期修改维护。
二、安装并配置 vue-i18n
vue-i18n 是 Vue.js 的国际化插件，能够方便地实现多语言切换功能。使用 npm 安装它：
npm install vue-i18n --save安装完成后，在项目的 main.js 文件中进行配置：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueI18n from 'vue-i18n';
// 引入语言资源文件
import en from '@/lang/en.js';
import zh from '@/lang/zh.js';
Vue.use(ElementUI);
Vue.use(VueI18n);
// 创建 VueI18n 实例
const i18n = new VueI18n({
locale: 'zh', // 默认语言为中文
messages: {
en: en,
zh: zh
}
});
new Vue({
el: '#app',
i18n, // 将 i18n 实例注入到 Vue 实例中
render: h => h(App)
});在上述代码中，我们首先引入了 vue-i18n 和之前创建的语言资源文件，然后创建了 VueI18n 实例，设置了默认语言为中文，并将语言资源文件挂载到 messages 属性上。最后，将 i18n 实例注入到 Vue 根实例中。
三、在页面中使用多语言
在 Vue 页面中使用多语言非常简单。例如：
<div class="language">
<h3>{{ $t('home.welcome') }}</h3>
<h3>{{ $t('home.home') }}</h3>
<h3>{{ $t('home.about') }}</h3>
<h3>{{ $t('home.contact') }}</h3>
</div>这里的 $t 函数就是 vue-i18n 提供的用于翻译文本的函数。它会根据当前设置的语言，从对应的语言资源文件中获取相应的文本。
四、实现语言切换功能
<template>
<div>
<el-dropdown @command="changeLanguage">
<span class="el-dropdown-link">
{{ currentLanguage }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="en">English</el-dropdown-item>
<el-dropdown-item command="zh">中文</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
currentLanguage: this.$i18n.locale === 'en'? 'English' : '中文'
}
},
methods: {
changeLanguage(lang) {
this.$i18n.locale = lang;
this.currentLanguage = lang === 'en'? 'English' : '中文';
}
}
}
</script>在这个组件中，我们使用 el-dropdown 组件创建了一个下拉菜单，当用户选择不同的语言选项时，调用 changeLanguage 方法，该方法会修改 $i18n 实例的 locale 属性，从而实现语言切换。同时，也更新了显示当前语言的文本。
五、总结
在 Vue 2 + Element UI 项目中实现中英双语切换主要包括以下几个关键步骤：首先是精心准备中英语言资源文件，将项目中所有需要国际化的文本按照语言分类整理存储。接着安装并合理配置 vue-i18n 插件，通过创建实例并挂载语言资源，为多语言切换奠定基础。然后在各个组件中便捷地使用 $t 函数引用多语言文本，实现界面文本的动态切换。最后通过创建语言切换组件，利用 vue-i18n 的特性来改变语言设置，完成整个双语切换功能。掌握这些步骤后，不仅能轻松实现中英双语切换，还能为进一步拓展多语言支持提供有力的技术支撑，使项目能够更好地服务于全球不同语言背景的用户，提升项目的国际化水平和用户体验。
