安装 Aurelia-I18N 插件

为了将官方 I18N 插件添加到 CLI 项目中,我们需要按照以下步骤进行安装。

首先,你要通过 npm 安装插件:

npm install aurelia-i18n

由于 Aurelia-I18N 由 i18next 支持,你应该安装它和你选择的后端插件。作为一个例子,我们将利用 i18next-xhr-backend:

npm install i18next i18next-xhr-backend

之后,我们需要告诉 CLI 应用程序有关新的依赖项。为此,我们将打开文件 aurelia_project / aurelia.json 并向下滚动到名为 dependencies 的部分。在那里添加以下三个条目:

{
  "name": "i18next",
  "path": "../node_modules/i18next/dist/umd",
  "main": "i18next"
},
{
  "name": "aurelia-i18n",
  "path": "../node_modules/aurelia-i18n/dist/amd",
  "main": "aurelia-i18n"
},
{
  "name": "i18next-xhr-backend",
  "path": "../node_modules/i18next-xhr-backend/dist/umd",
  "main": "i18nextXHRBackend"
}

很棒,现在按照官方的 Aurelia-I18N 指南, 我们在你的应用程序的根目录中创建一个名为 locales 的文件夹。

你必须将文件夹放入根目录(与 src 相同的级别 ),因为这是你的应用程序的托管根目录

在那里添加你希望支持的每种语言的子文件夹,例如 ende 用于英语和德语。

在每个文件夹的内部创建一个名为 translation.json 的文件,其中包含你的翻译键和值。请按照官方指南获取详细信息。

最后但并非最不重要的是,是时候将应用程序中的插件连接起来了。因此,请转到 src / main.js 文件并按如下所示进行配置。

/**********************************************/
/          add the necessary imports           /
/**********************************************/
import environment from './environment';
import Backend from 'i18next-xhr-backend';

//Configure Bluebird Promises.
//Note: You may want to use environment-specific configuration.
Promise.config({
  warnings: {
    wForgottenReturn: false
  }
});

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  /**********************************************/
  /             register the plugin              /
  /**********************************************/
  aurelia.use.plugin('aurelia-i18n', (instance) => {
    // register backend plugin
    instance.i18next.use(Backend);

    // adapt options to your needs (see http://i18next.com/docs/options/)
    // make sure to return the promise of the setup method, in order to guarantee proper loading
    return instance.setup({
      backend: {                                  // <-- configure backend settings
        loadPath: './locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
      },
      lng : 'de',
      attributes : ['t','i18n'],
      fallbackLng : 'en',
      debug : false
    });
  });

  aurelia.start().then(() => aurelia.setRoot());
}