github 页面未从部署的 React 应用程序中的服务器加载文件

Question

我已将 React 项目部署到 github 并在 github 页面查看它。我使用 i18next 为我的网络应用程序提供不同的翻译。当我通过本地主机运行我的应用程序时， locales 文件夹被访问并正确翻译我的应用程序的内容。但是，当使用 github 页面部署时，我收到错误：

警告：

i18next::backendConnector: loading namespace translation for language en failed failed loading /locales/en/translation.json

错误：

request.js:60 GET https://user.github.io/locales/en/translation.json 404

所以我无法访问我的语言环境文件夹中的翻译。

我的文件夹结构（我的文件夹里面有更多同级别英语以外的语言）：public > locales > en > translation.json

位于 :

的文档中的 i18next.js

src > i18n.js

代码：

import i18n from 'i18next'; 
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

const Languages = ['en' , 'gr']; //the languages I want 


i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist:Languages,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }


  });


export default i18n;

非常感谢你的帮助

Answer 1

要在 gh-pages 上部署，您需要调整托管 json 的加载路径 check this

希望这个作品成功！

github 页面未从部署的 React 应用程序中的服务器加载文件

github pages not loading file from server in deployed React App

i18next

reactjs