I18Next не работает при загрузке данных из бэкэнда - PullRequest
Новая
       17

I18Next не работает при загрузке данных из бэкэнда

0 голосов
/ 01 мая 2019

Я реализую интеграцию i18next в приложение с получением данных из бэкэнда (i18next-xhr-backend). Все выглядит хорошо, я не получаю никаких ошибок, но в итоге перевод не работает.

Я использую 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": "Просмотреть все уведомления", ...}}}

Когда я загружаю страницу, я получаю следующие сообщения: 

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, то все работает нормально, но мне нужно загрузить ресурсы из серверной части.

Я пробовал разные варианты, но ничего не помогло. Буду благодарен за совет.

1 Ответ

1 голос
/ 02 мая 2019

Вы должны установить файл ресурсов без языка и пространства имен, потому что вы уже указали lng и ns в loadPath: 

{
  "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,
        ...
      }
    }
    ...
  }

Пример

...