Question

我遇到与此处所述相同的问题（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。我被带到了正确的网址https://example.com/locales/en/translation.json，但我被重定向到我的index.html

Answer 1

我明白了，我错过的部分是我正在部署到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))

Answer 2

在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 =将被视为静态文件路径的网址格式 static_files =静态文件的路径 upload = regex，它与部署应用程序时此处理程序将引用的所有文件的文件路径相匹配。

Google Cloud：react-i18next没有在React app中加载json翻译文件

2 个答案: