在开发 Web 应用程序时，跨越不同语言和文化的国家和地区是一项极为重要的任务。使用不同的语言和文化，可以帮助我们更好的传达信息，使应用程序更受用户欢迎和更具可用性。
在 Vue.js 中，我们可以使用 Vue-i18n 插件来实现多语言国际化。Vue-i18n 是一个 Vue 插件，它允许我们轻松地将多个语言集成到应用程序中，并根据不同的用户需要轻松切换语言。
安装
在使用 Vue-i18n 前，需要先安装该插件。可以使用以下命令安装：
npm install vue-i18n --save
配置
安装 Vue-i18n 后，在 Vue.js 项目中需要进行一些配置。在 main.js 中应该引入并配置 Vue-i18n。代码如下：
-- -------------------- ---- -------
------ --- ---- -----
------ ------- ---- ----------
------ --- ---- -----------
-----------------
----- -------- - -
--- -
-------- -
------ ------- -------
-
--
--- -
-------- -
------ --------
-
-
-
----- ---- - --- ---------
------- ----- -- ------
--------------- ----- -- ---------------
---------
--
--- -----
--- -------
-----
------- - -- ------
--在上述代码中，我们首先在 main.js 中引入并配置 Vue-i18n。 Vue-i18n 插件使用了“messages”对象来存储应用程序中的多个语言字符串（例如，英文和中文）。 在“messages”对象中，我们可以定义我们想要的每个语言的响应字符串。
'locale' 和 'fallbackLocale' 属性的值应该与 'messages' 对象中的键值相同。 接下来，我们在 Vue 实例中传递“i18n”对象，以便整个应用程序知道使用 Vue-i18n。
使用
在设置完 Vue-i18n 后，就可以在 Vue 组件中使用该插件。以下是一个示例代码：
在模板中：
<div id="app">
<p>{{ $t("message.hello") }}</p>
</div>在方法中：
methods: {
changeLang(lang){
this.$i18n.locale = lang;
}
}可以看到，使用 Vue-i18n 是非常简单的。在模板中使用 $t() 方法获取已定义的语言字符串。在组件的方法中，可以轻松地更改当前语言。
总结
Vue-i18n 是 Vue.js 中实现多语言国际化的绝佳工具。使用 Vue-i18n 可以轻松地将不同的语言集成到应用程序中并轻松切换它们。在应用 Vue-i18n 之前，请确保在“main.js”中引入和配置了 Vue-i18n。使用 $t() 方法获取已定义的语言字符串，帮助更好的为用户和访问者传达信息，使您的应用程序更具可用性。
示例代码: Vue.js 中使用 Vue-i18n 实现多语言国际化
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f082e48841e9894eb8fb2