React i18next Backend-Path 在本地和生产环境中不同答案

【问题标题】：React i18next Backend-Path different in local and production environmentReact i18next Backend-Path 在本地和生产环境中不同
【发布时间】：2020-05-03 13:31:40
【问题描述】：

我正在使用带有 react-i18next 的 React 应用程序并使用 i18next-xhr-backend 加载翻译

i18n
  .use(Backend) 
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    lng: "de",
    backend: {
      loadPath: '/static/locales/{{lng}}/{{ns}}.json'
    }        
  });

如果我在本地运行它，我的应用程序将通过 http://localhost:3000/ 提供服务

翻译文件也加载得很好（src 位于public/statuc/locales/）http://localhost:3000/static/locales/de/translation.json

我现在面临的问题是，在生产中，应用程序不是从根目录提供的，而是通过子文件夹提供构建的文件。因此，我更改了我的packages.json 并添加了homepage

{
  "name": "myapp",
  "version": "0.1.0",
  "homepage": "/static/app/",
  ...
}

在构建应用程序并在 prod 上部署后，它仍然可以正确加载，但找不到翻译文件。

http://production.tld/static/app/index.html

react 应用文件已正确加载http://production.tld/static/app/static/js/main*.js

但翻译文件仍由http://production.tld/static/locales/de/translation.json 获取，不再可用（而不是http://production.tld/static/app/static/locales/de/translation.json 是正确的）

我可以通过更改 i18n 配置来修复它

 backend: {
     loadPath: '/static/app/static(locales/{{lng}}/{{ns}}.json'
 }

然后它在生产中工作，但不再在本地工作：-/

我不确定如何避免这种情况？

【问题讨论】：

标签： reactjs react-i18next

【解决方案1】：

您可以将loadPath 作为函数传递。

backend: {
  loadPath: () => {
    // check the domain
    const host = window.location.host;
    return (host === 'production.ltd' ? '/static/app':'') + '/static/app/static/locales/{{lng}}/{{ns}}.json';
  },
},

【讨论】：

它正在工作，我很惊讶没有其他解决方案，因为它看起来像是一种解决方法？但我现在会使用它:-)
您也可以为 dev 和 prod 使用具有不同路径的 env 变量，但这需要更多的工作和解释 :)
感谢您提到功能的可能性。这可能会让我未来的生活更轻松。

【解决方案2】：

这是一个可能值得拥有自己的顶级问题的后续问题：

如果您的语言环境目录的名称中有破折号（例如locales/en-us/translation.json），那么事情就不起作用了。我们应该如何解决这个问题？我偶然发现了这个答案，因为我想也许我可以按照以下方式做一些事情：

loadPath: (lng, ns) => { return `/locales/{{lng.replace(/-/g,'')/{{ns}}.json` }

但在我最初的测试中，这不起作用。

【讨论】：

【解决方案3】：

另一个解决方案是使用环境变量。只有条件不同，没有函数，这个想法就像@felixmosh的解决方案。

create-react-app 的示例，在这里您可以使用环境变量“NODE_ENV”作为条件。

i18n.use(XHR)
.use(initReactI18next)
.init({
    backend: {
        loadPath:
            process.env.NODE_ENV !== "production"
                ? `./locales/{{lng}}/{{ns}}.json`
                : ` /static/app/static/locales/{{lng}}/{{ns}}.json`,
    },
    lng: "de",
    fallbackLng: "de",
    load: "languageOnly",
    debug: true,
    react: {
        transSupportBasicHtmlNodes: true,
        transKeepBasicHtmlNodesFor: ["br", "strong", "i", "sub", "sup", "li"],
    },
});

这里是 create-react-app 的文档 https://create-react-app.dev/docs/adding-custom-environment-variables

【讨论】：