如何在 github 页面中使用 i18next答案

【问题标题】：How to use i18next with github pages如何在 github 页面中使用 i18next
【发布时间】：2020-04-28 16:59:55
【问题描述】：

我使用 react-i18next 库开发了具有国际化功能的 react 应用程序。我有通常的配置（如在 lib 的自述文件中）：

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    }
  });

  export default i18n;

我的翻译文件被放到public/locales/de/translation.json（和de以外的文件夹），与文档中的一样。

它在开发模式下工作。我将应用程序部署到heroku，它在那里也可以正常工作。但是我需要它在 github pages 站点中工作，并且我的 jsons（translation.json 文件）没有在那里加载，并且我得到了这些错误（来自浏览器控制台）：

Failed to load http://hereIsMyUsername.github.io/locales/en/translation.json resource: the server responded with a status of 404 ()

构建反应应用程序后，我的build 文件夹结构如下：

build
- locales
- static
  - css
  - js
  - media

所以通常我的应用程序在 github 页面中运行良好，只是它无法加载 jsons。我在文档中读到它是因为 github 页面尝试从根目录加载这些 json，但在那里找不到它们，因为它们存储在 locales/{lang}/translation.json 中。所以推荐的方法是将所有的json和其他文件放到root。但由于我有很多不同的 translation.json 文件，所以不是管理它的方法。

所以我的问题是如何让 github 页面使用它？或者如何配置我的 i18n 以适用于 github 页面？

【问题讨论】：

标签： reactjs github-pages i18next react-i18next

【解决方案1】：

对于 gh-pages，您需要在后端选项中调整 loadPath：https://github.com/i18next/i18next-xhr-backend/blob/master/README.md#backend-options

因为您的 gh 页面是在子路径（通常是 repo 名称）上提供的

【讨论】：