前言
Vue-i 是一个基于 Vue.js 的国际化插件，它可以帮助你更方便的实现网站的多语言支持。本文将会介绍如何使用 Vue-i 这个 npm 包来实现网页的国际化。
安装 Vue-i
首先，我们需要通过 npm 来安装 Vue-i。打开终端，然后执行以下命令：
npm install vue-i
当然，你也可以选择使用 yarn 安装：
yarn add vue-i
配置 Vue-i
安装成功后，我们就可以在 Vue.js 项目中使用 Vue-i 了。首先，我们需要在项目入口文件中引入 Vue-i：
import Vue from 'vue' import VueI from 'vue-i' Vue.use(VueI)
然后，在 Vue.js 的配置对象中添加 i18n 属性：
-- -------------------- ---- -------
----- ---- - --- ------
------- -----
--------------- -----
--------- -
--- -
------ ------- -------
--
--- -
------ ------- -------
-
-
--
--- -----
---
-----
---
--在这个配置对象中，我们需要提供一些信息：
- locale：当前选中的语言，默认为 'en'
- fallbackLocale：如果当前语言包中找不到对应的翻译，就使用这个语言包来替代
- messages：包含了所有语言包的对象，key 是语言代码，value 是这个语言包的内容。值得注意的是，所有语言包需要包含相同的键名，这些键名会在翻译的时候用到。
在模板中使用 Vue-i
现在我们已经完成了 Vue-i 的配置，可以开始在模板中使用它了。为了演示方便，我们只在一个组件中使用了 Vue-i。
<template>
<div class="hello">
<p>{{ $t('hello') }}</p>
</div>
</template>这段模板代码中，我们使用了 $t 这个 Vue-i 提供的全局方法来获取当前选中语言的翻译。第一个参数是要翻译的文本的键名（也就是我们在配置对象中提到的键名），它必须存在于所有语言包中。如果当前语言包中没有这个键名，Vue-i 会自动查找 fallbackLocale 所指定的语言包。
假设我们当前选中的语言是英语，那么页面上会渲染出 “Hello, world!” 这个文本；如果当前选中的是西班牙语，那么我们将会看到 “¡Hola, mundo!” 这段文本。
更改语言
现在我们来尝试更改语言。Vue-i 提供了一个 $i18n 属性，可以用它来获取当前语言，并且还可以更改当前语言：
-- -------------------- ---- -------
----------
-----
------- ------------------------------------------
------- ------------------------------------------
---- --------------
----- ----------- ------
------
------
-----------
--------
------ ------- -
-------- -
---------------- -
----------------- - ----
-
-
-
---------在这段代码中，我们使用了两个按钮来切换语言。当我们点击这个按钮的时候，它就会调用 changeLang 方法，并把对应的语言代码作为参数传递进去。然后，我们就可以通过设置 $i18n.locale 来更改当前的语言。
总结
通过这篇文章，我们了解了如何使用 npm 包 Vue-i 来实现网站的国际化。Vue-i 提供了一种简单且易于理解的方式来处理多语言的问题，非常适合用于 Vue.js 项目的国际化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664681e8991b448e25b3