npm 包 egg-i18n2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在当今互联网行业中，前端开发因为与用户直接交互而变得日益重要。随着互联网化的深入，很多企业都在国内外开设网站、APP或者 H5 页面，为了更好地让用户对产品进行了解并让用户更好的使用，越来越多的公司开始关注网站内容的国际化处理。而在 Egg.js 框架的帮助下，快速、轻松实现国际化处理就显得尤为重要。本文将介绍如何使用 npm 包 egg-i18n2 实现 Egg.js 的国际化处理。

什么是 egg-i18n2

egg-i18n2 是基于 i18n 模块二次开发而来的 Egg.js 框架的一个国际化插件，支持多种语言和多种语言文件格式。可以通过在 Egg.js 项目中引入该插件，然后配置语言包文件，即可在前端页面中轻松输出多语言信息。

egg-i18n2 的优势

相比于其他国际化方案，egg-i18n2 有以下优势：

使用相对简单：只需要引入该 npm 包，在配置文件中添加语言包即可。
支持非常多的语言：已支持的语言包种类多达几十种。
支持多种文件格式：除了支持 json 语言包，还可以支持 yml 和 po 等多种格式。

因此，使用 egg-i18n2 进行多语言实现不仅效果优秀，而且可以让代码更加简洁。

使用指南

接下来我们就以 Egg.js 项目为例，使用 egg-i18n2 插件实现国际化。

安装和配置 egg-i18n2

安装 egg-i18n2 插件

在 Egg.js 项目的根目录下执行：

npm i egg-i18n2 --save

在 config/plugin.js 文件中配置 egg-i18n2 插件，如下所示：

exports.i18n = {
  enable: true,
  package: 'egg-i18n2'
}

在 config/config.default.js 文件中配置 Egg.js 语言设置，如下所示：

exports.i18n = {
  defaultLocale: 'zh-CN',
}

配置语言包

在 Egg.js 项目根目录下，创建 i18n 文件夹，并在其中创建对应语言的 JSON 文件，例如 zh-CN.json。在该文件中定义对应语言的键值对。

例如：

{
  "Hello": "你好",
  "Welcome": "欢迎使用 egg-i18n2",
  "User": {
    "Name": "用户名",
    "Password": "密码"
  }
}

使用 egg-i18n2 插件输出国际化信息

使用 egg-i18n2 插件输出国际化信息，只需要在要输出的文本信息中加入对应键名，即可输出与当前设置的语言相匹配的文本信息。

例如在 HTML 文件中，加入以下代码：

<p>{{ ctx.__('Hello') }}</p>

此时输出为：

<p>你好</p>

切换语言

egg-i18n2 不仅支持切换默认的语言，还支持运行时切换当前使用的语言。例如，可以在一个下拉框中，将所有支持的语言进行遍历，点击某一语言，则页面对应修改至选择语言对应的文本输出。

在 Node.js 控制器中：

async changeLanguage() {
  const locale = this.ctx.params.lang;
  this.ctx.cookies.set('locale', locale);
  this.ctx.redirect(this.ctx.get('referer'));
}

在路由文件中：

router.get('/change/:lang', controller.eggI18n.changeLanguage);

总结

从本文的实例可以看出，egg-i18n2 插件能够快速地实现多语言的输出，减少开发者的工作量，同时可以使用不同的语言包实现不同国家、地区用户的访问，提高了网站的友好性与适用性。让用户有更好的体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055cad81e8991b448da118