国际化（i18n）已经成为现代 Web 开发中不可或缺的一部分，它能够帮助开发者为不同语言和文化背景的用户提供良好的用户体验。在 Vue.js 项目中，vue-i18n 是常见的国际化解决方案，但有时候我们可能需要使用更加轻量的方式来实现多语言支持。本文将介绍如何基于 translate.js 和 Vue 实现国际化语言翻译。
1. 项目背景
在本文中，我们使用 translate.js 来实现国际化翻译，而不是 vue-i18n。translate.js 是一个简单且强大的 JavaScript 库，能够在不依赖任何框架的情况下，快速实现翻译功能。我们将其与 Vue 结合，创建一个简单的项目来展示如何动态切换语言。
2. 准备工作
首先，确保你已经创建了一个 Vue 项目，并通过 CDN 引入了 translate.js。
2.1 创建 Vue 项目
如果你还没有 Vue 项目，可以使用以下命令快速创建一个 Vue 2 项目：
vue create my-vue-i18n-project
2.2 引入 translate.js
在你的 index.html 中，通过 CDN 方式引入 translate.js：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Translate.js Example</title>
<script src="https://unpkg.com/translate.js@1.3.0/dist/translate.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
3. 实现国际化翻译功能
3.1 配置语言包
在项目的 src 目录下创建一个 translations.js 文件，用来存放语言包信息。我们将定义两个简单的语言包：中文和英文。
// translations.js
export const translations = {
en: {
welcome: "Welcome to our website!",
description: "This is a simple example of internationalization using translate.js and Vue.",
contact: "Contact us"
},
zh: {
welcome: "欢迎来到我们的网站！",
description: "这是一个使用 translate.js 和 Vue 实现国际化的简单示例。",
contact: "联系我们"
}
};
3.2 在 Vue 中初始化 translate.js
接下来，在 App.vue 中初始化 translate.js 并实现语言切换的逻辑：
<template>
<div id="app">
<div>
<button @click="setLanguage('en')">English</button>
<button @click="setLanguage('zh')">中文</button>
</div>
<h1>{{ $t('welcome') }}</h1>
<p>{{ $t('description') }}</p>
<button>{{ $t('contact') }}</button>
</div>
</template>
<script>
import { translations } from './translations.js';
export default {
data() {
return {
currentLang: 'en'
};
},
methods: {
// 切换语言
setLanguage(lang) {
this.currentLang = lang;
window.translate.use(lang); // 使用 translate.js 切换语言
},
// 获取翻译文本
$t(key) {
return window.translate.get(key); // 获取当前语言的翻译
}
},
created() {
// 初始化 translate.js
window.translate = new Translate({
defaultLanguage: this.currentLang,
languages: translations
});
}
};
</script>
3.3 实现语言切换
在上面的代码中，我们实现了一个简单的按钮点击事件，通过 setLanguage() 方法切换语言。同时，我们使用了 $t() 方法来获取当前语言的翻译文本。
setLanguage(lang)方法负责切换当前语言，并调用translate.js的use()方法。$t(key)方法用于获取translate.js中定义的翻译内容。
4. 运行项目
运行 Vue 项目，使用如下命令：
npm run serve
启动项目后，您会看到一个简单的页面，包含切换语言的按钮、标题和描述内容。点击不同的语言按钮，页面的内容会根据选择的语言动态更新。
5. 进一步优化
5.1 自动检测用户语言
您可以通过浏览器的 navigator.language 检测用户的默认语言，从而自动选择合适的语言：
created() {
const userLang = navigator.language.startsWith('zh') ? 'zh' : 'en';
this.currentLang = userLang;
window.translate = new Translate({
defaultLanguage: this.currentLang,
languages: translations
});
}
5.2 存储用户选择的语言
为了在用户重新访问页面时保持其选择的语言，可以使用 localStorage 存储语言选择：
setLanguage(lang) {
this.currentLang = lang;
window.translate.use(lang);
localStorage.setItem('lang', lang); // 将语言存储到 localStorage
},
created() {
const savedLang = localStorage.getItem('lang');
const userLang = savedLang || (navigator.language.startsWith('zh') ? 'zh' : 'en');
this.currentLang = userLang;
window.translate = new Translate({
defaultLanguage: this.currentLang,
languages: translations
});
}
6. 总结
通过本文，我们了解了如何在 Vue 项目中结合 translate.js 实现轻量级的国际化翻译功能。相比于 vue-i18n，translate.js 更加简洁，适合不需要复杂配置的项目。在实际项目中，可以根据需求进一步扩展和优化，例如支持更多语言、使用动态加载语言包等。
希望这篇文章对您有所帮助！如果您有任何问题或建议，欢迎讨论！
致谢
特别感谢 translate.js 的作者开源了如此优秀的库，使得国际化语言翻译变得简单高效。如果您对 translate.js 感兴趣，或者想了解更多，请访问其官网：translate.js 官方网站。
