Google Cloud：react-i18next 未在 React 应用程序中加载 json 翻译文件答案

【问题标题】：Google Cloud: react-i18next not loading json translation files in React appGoogle Cloud：react-i18next 未在 React 应用程序中加载 json 翻译文件
【发布时间】：2018-06-08 00:52:31
【问题描述】：

我遇到了与此处 (stack overflow question) 所述相同的问题，只是我的两个项目都配置正确。

我的 i18n.js 配置设置如下。

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import { reactI18nextModule } from 'react-i18next';

i18n
  .use(Backend)
  .use(reactI18nextModule)
  .init({
        interpolation: {
            // React already does escaping
            escapeValue: false
        },
        lng: 'en',
      fallbackLng: 'en',
      backend: {
        loadPath: '/locales/{{lng}}/translation.json',
        allowMultiLoading: true
      },
      debug: true,
      react: {
        wait: true
      }
  });

export default i18n;

我收到此错误i18next::backendConnector: loading namespace translation for language en failed failed parsing locales/en/translation.json to json

我确保我的locales 目录位于我的public 目录中。我还验证了npm run build 的帖子locales 目录被复制到build 目录。

在我的暂存环境中，我打开 Chrome 开发工具上的网络选项卡并在新选项卡中打开 translations.json。我被带到正确的 url https://example.com/locales/en/translation.json 但是我被重定向到我的 index.html

【问题讨论】：

标签： reactjs google-app-engine create-react-app react-i18next

【解决方案1】：

在 App Engine Standard 中，您需要在 app.yaml 配置文件中使用一个处理程序，将 URL 模式与上传的静态文件相关联。您将使用正则表达式在为静态文件指定的路径中定义将被视为静态文件的扩展文件。

例如。来自app.yaml configuration for static files in App Engine Standard。

handlers: - url: /(.*\.(gif|png|jpg))$ static_files: static/\1 upload: static/.*\.(gif|png|jpg)$

在哪里，

url = 将被视为静态文件路径的 URL 模式。
static_files = 静态文件的路径。
upload = 正则表达式，匹配部署应用程序时此处理程序将引用的所有文件的文件路径。

【讨论】：

【解决方案2】：

我想通了，我缺少的部分是我正在部署到 Google Cloud，并且为此的配置要求我指定允许将哪些文件类型用作静态资源。我在我的配置中添加了json，现在它可以工作了。

handlers:
- url: /(.*\.(html|css|js|png|jpg|woff|json))
  static_files: build/\1
  upload: build/(.*\.(html|css|js|png|jpg|woff|json))

【讨论】：