Google Cloud:react-i18next 不会在 React 应用程序中加载 json 翻译文件

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目录中。我还验证了locales目录npm run build帖子是否已复制到build目录中。

在我的暂存环境中，我在 Chrome 开发者工具上打开"网络"标签，然后在新标签页中打开translations.json。我被带到正确的网址https://example.com/locales/en/translation.json但是我被重定向到我的索引.html

Answer 1

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

例如，在 App Engine Standard 中对静态文件进行 app.yaml 配置。

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

哪里

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

Answer 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))