从后端加载数据时 I18Next 不起作用

Question

我通过从后端 (i18next-xhr-backend) 获取数据，将 i18next 集成到应用程序中。一切看起来都很好，我没有得到任何错误，但最终翻译不起作用。

我使用 Vue 和 Webpack。这是我的代码：

main.js:

...
import VueI18Next from "./i18next.js";
...
Vue.use(VueI18Next, (i18next) => {
  let router = require("./router").default; // Load only after i18next initialized

  new Vue({
    el: "#app",
    components: {
      App
    },
    router,
    store,
    render: h => h("app")
  });
});

i18next.js:

import Vue from "vue";
import { isFunction, defaultsDeep } from "lodash";
import i18next from "i18next";
import i18NextXHR from "i18next-xhr-backend";

function install(Vue, callback, options = {}) {
  i18next
    .use(i18NextXHR)
    .init(defaultsDeep({}, {
      lng: "en",
      debug: true,
      fallbackLng: "en",
      whitelist: ["en", "ru"],
      ns: ["app"],
      defaultNS: "app",
      load: "languageOnly",
      saveMissing: true,
      saveMissingTo: "all", // "fallback", "current", "all"

//piece of code #1
/*    resources: {
              en: {
                app: {
                  "SeeAllNotifications": "a b c",
                  "Test2": "Test 2"
                }
              }
            },*/

//piece of code #2
      backend: {
        // path where resources get loaded from
        loadPath: "/locales/resources.json?lng={{lng}}&ns={{ns}}",
        // path to post missing resources
        addPath: "/locales/add/{{lng}}/{{ns}}",
        // server supports multiloading
        allowMultiLoading: false,
        // allow cross domain requests
        crossDomain: false
      },
    }), (err, t) => {


      Vue.prototype.$lng = i18next.language;
      Vue.prototype._ = (key, opts) => {
        return t(key, opts);
      };

      console.log("I18Next initialized! Language: " + i18next.language);

      console.error('======TEST======' + i18next.t('SeeAllNotifications'));

      if (isFunction(callback))
        callback(i18next, t);
    });

  // Register as a filter
  Vue.filter("i18n", function(value, options) {
    return i18next.t(value, options);
  });

  // Register as a directive
  Vue.directive("i18n", {
    bind: function(el, binding, vnode) {
      el.innerHTML = i18next.t(binding.expression);
    }
  });

  Vue.prototype.$i18n = i18next;
  Vue.prototype._ = (key, opts) => {
    return i18next.t(key, opts);
  };
}

export default {
  install
};

资源URL是正确的。 http://localhost:4000/locales/resources.json?lng=en&ns=app 作为回应，我得到了正确的数据：

{"en":{"app":{"SeeAllNotifications":"See all notifications",...}}}

当我加载页面时，我收到这些消息：

i18next::backendConnector: loaded namespace app for language en 
{en: {…}}
    en:
        app: {SeeAllNotifications: "See all notifications", ...",
i18next: languageChanged en
i18next: initialized
I18Next initialized! Language: en

看起来一切都准备就绪，但后来我得到：

======TEST======SeeAllNotifications
i18next::translator: missingKey en app SeeAllNotifications SeeAllNotifications

翻译已加载，但无法使用。如果代码段 #2 而不是代码段 #1，那么一切正常，但我需要从后端加载资源。

我尝试了不同的选择，但没有任何帮助。我将不胜感激。

Answer 1

您必须设置没有语言和名称空间的资源文件，因为您已经在 loadPath:

中指定了 lng 和 ns

{
  "SeeAllNotifications": "a b c",
  "Test2": "Test 2"
}

或者您必须启用 allowMultiLoading:

import BackendAdapter from "i18next-multiload-backend-adapter";
import XHR from "i18next-xhr-backend";

i18next
  .use(BackendAdapter)
  .init({
    ...
    backend: {
      backend: XHR,
      backendOption: {
        loadPath: "/locales/resources.json?lng={{lng}}&ns={{ns}}",
        addPath: "/locales/add/{{lng}}/{{ns}}",
        allowMultiLoading: true,
        ...
      }
    }
    ...
  }

Example

从后端加载数据时 I18Next 不起作用

I18Next doesn't work when loading data from backend

javascript

node.js

vue.js

webpack

i18next