i18next实现h5页面国际化

1.引用i18next.min.js

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
}, function(err, t) {
  // initialized and ready to go!
  document.getElementById('output').innerHTML = i18next.t('key');
});

参考https://www.i18next.com/overview/getting-started
2.如果想使用文件存储resources部分的内容，需要引用i18nextXHRBackend.min.js

i18next.use(i18nextXHRBackend);
            i18next.init({
                lng: 'en', 
                debug: true,
                backend: {
                    loadPath: './locales/{{lng}}/{{ns}}.json'
                }
             }, function(err, t) {
                 document.getElementById('output').innerHTML = i18next.t('key');
            });

参考https://www.i18next.com/how-to/add-or-load-translations
3.切换语言

i18next.changeLanguage('en', (err, t) => {
  if (err) return console.log('something went wrong loading', err);
  t('key'); // -> same as i18next.t
});

// using Promises
i18next
  .changeLanguage('en')
  .then((t) => {
    t('key'); // -> same as i18next.t
  });

4.加速神器，引用loc-i18next.min.js

<li><a href="#" data-i18n="nav.home"></a></li>
<div class="outer" data-i18n="ns:key" data-i18n-target=".inner">
  <input class="inner" type="text"></input>
</div>
<a id="btn1" href="#" data-i18n="[title]key.for.title"></a>
<input type="text" data-i18n="[placeholder]login.username"/>
<a href="javascript:;" data-i18n="[append]index.role"> //[append]在后面增加，可解决图片不显示问题 [prepend]增加到前面
                    <img src="statics/img/index/head.jpg" class="layui-nav-img"/>
</a>
<a data-i18n='[href]index.functionMenu;index.tab1' > //多个属性用分号隔开
</a>
            

i18next.use(i18nextXHRBackend);
            i18next.init({
                lng: 'en', 
                debug: true,
                backend: {
                    loadPath: './locales/{{lng}}/{{ns}}.json'
                }
  }, function(err, t) {
                localize = locI18next.init(i18next);
                localize('[data-i18n]');
  });

参考https://www.npmjs.com/package/loc-i18next