在全球化的背景下，一个良好的应用程序在使用过程中应该支持多种语言或文化。Vue.js作为一种流行的JavaScript框架，提供了vue-i18n这个非常方便的工具包，可以快速实现多语言切换。在本文中，我们将介绍vue-i18n的基本使用以及如何在Vue.js中实现多语言切换。
什么是 vue-i18n？
vue-i18n是 Vue.js的一个国际化插件，具有以下功能：
- 提供轻松的国际化翻译解决方案
- 可以根据当前环境自动加载本地化资源文件
- 支持组件、指令和过滤器本地化
安装 vue-i18n
在使用vue-i18n之前，我们需要先在项目中安装它。通过npm来安装vue-i18n，运行以下命令：
npm install vue-i18n --save
安装完成后，我们就可以引入并使用它了。
使用 vue-i18n
首先，我们需要定义一些本地化字符串来在应用程序中使用。我们可以将这些字符串保存在特定的文件中，例如 locales 文件夹下的 zh-CN.js 和 en-US.js。在本例中，我们只使用一个字符串“Hello World!”， 并将其存储在 locales/zh-CN.js 和 locales/en-US.js 字符串文件中。
-- -------------------- ---- ------- -- ---------------- ------ ------- - ------ ------- - -- ---------------- ------ ------- - ------ ------ ------- -
在每个字符串文件中，所有本地化字符串应导出为默认的JavaScript对象。
接着，我们需要在Vue.js应用程序中配置vue-i18n。创建一个Vue实例，并添加i18n对象到它的选项中。
-- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------- ---- ---------- ------ -------- ---- ----------- ---------------- ----- ---- - --- --------- ------- -------- -- --- ------ --------- -- --- ------ ------- -- --- ----- ----- ------- - -- ------- -----------------
以上代码中，我们首先导入需要的依赖，然后在Vue实例中添加i18n对象，并将其注册到Vue.js应用程序中。
注意，这里我们默认使用‘zh-CN’作为首选语言。
在Vue.js组件中使用 vue-i18n，将在组件中添加 $t 属性。 $t 属性上可以接收一个string类型的变量作为参数（例如，我们的“Hello World!”本地化字符串）。
<template>
<div>
{{ $t('hello') }}
</div>
</template>现在我们已经成功将vue-i18n后台配置完毕，接下来我们将实现多语言切换功能。
实现多语言切换
首先，我们将创建一个选择语言组件（LanguageSwitcher）。该组件将显示当前可用的语言选项，并在单击时更新vue-i18n选项。让我们看一下如何实现它，它的模板如下：
-- -------------------- ---- -------
----------
-----
------- ------------------- -------------------------
------- --------------- ------ -- ---------------- ------------ ----------------------
-- ------------ --
---------
---------
------
-----------在这个模板中，我们首先创建一个select元素，它将包含所有可用的语言选项。
接着，我们为select元素添加@change事件。 在事件中，我们将调用setLocale方法，并将当前选中的语言作为参数传递给该方法。
一些明显的变量名和方法如下：
-- -------------------- ---- -------
------ ------------
------ -
------ -
--------------- --------
-
--
--------- -
----------------- -
------ ------------ -- -
------- ----- ------ ---------
------- ---------- ------ ---------
--
--
--
-------- -
----------- -
----------------- - -------------------
--
--我们首先定义了一个selectedOption data属性，并将其初始化为‘zh-CN’。每当用户更新select元素的选择选项时，该属性都将更新。
然后我们通过languagesOptions计算属性，获取所有可用语言选项的列表。languageOptions是默认的或者用户自定义的，从父组件中传递过来。
setLocale方法将处理组件中的语言切换。它将简单地通过 $i18n.locale调用 vue-i18n 实例。
此外，我们还必须将LanguageSwitcher组件添加到主Vue.js组件中。
<template> <!-- template content --> <language-switcher /> <!-- template content --> </template>
在以上代码中, 我们把<language-switcher />添加到Vue.js项目的template中。
以上代码告诉我们如何实现JSON文件的本地化字符串、配置vue-i18n以及添加多语言切换组件并将其呈现在Vue.js应用程序中。
总结
在本文中，我们详细介绍了Vue.js应用程序中如何使用vue-i18n实现多语言切换。
Vue-i18n 是一个强大而灵活的框架，支持组件，指令和过滤器本地化，满足大多数本地化要求。现在你可以使用它来构建多语言web应用程序。
源码示例: vue-i18n-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522870895b1f8cacda044e3