i18next 顯示鍵而不是值

Question

我在/locales/en/有translation.json文件

{
    "app": {
        "name": "Example App"
    }
}

在html ，我有：

<a href="/" data-i18n="app.name">

在js ：

$(document).ready(function() {

    var language_complete = navigator.language.split("-");
    var language = (language_complete[0]);

    console.log('language', language);

    $.i18n.init({
        lng: language,
        fallbackLng: false,
        debug: false
    }, function() {
        $('a').i18n();
    });
});

它顯示app.name而不是Example App 。 我在代碼中遺漏了什么？ 謝謝

Answer 1

您必須將useLocalStorage和useDataAttrOptions設置為 true

$.i18n.init({useLocalStorage: true , useDataAttrOptions:true, ....});

Answer 2

從 i18next V2 開始，不再提供開箱即用的后端（ 請參閱遷移指南），因此您需要在 init 塊中定義backend配置：

backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
},

如果你不這樣做，你的資源將不會被加載，翻譯值將回退到它們各自的鍵（ 參見源代碼）。

Answer 3

在 js 中，這是因為$(document).ready不等待加載外部內容。 您需要使用$(window).on('load',function(){...}) 。