如何在ReactJS构建中包含i18next语言环境文件

Question

我搜索了很多帖子，但在解决构建问题方面运气不佳。

我有两个主要问题

1. /public/loce/xx/xxx.json文件路径在生成后不包括在内
2. css中使用的背景图像路径工作不正常

结构如下：

my-app
public
images
image.jpg
locale
xx
xxx.json
src

以及背景图像url，如url(/images/image.jpg)、

url在dev上运行良好，但在生产/构建后，它相对于/路径，而不考虑package.json中设置的homepage

区域设置文件也是如此。

PS：homepage将不是/，假设它将是/myapp/

我的i18n文件类似于：

i18n
use(Backend)

我曾尝试将后端设置设置为任何值(__dirname | env.PUBLIC_URL,...etc(，但没有任何结果。

这似乎是一个非常常见的问题，因为我发现到处都有关于它的帖子，然而，在运行npm run build时，如何正确设置相对路径还没有明确的答案

如果你有知识，请为假人提供一步一步的指南类型的答案。

Answer 1

我已经设法使用以下设置使其工作：

结构：

├── public
|  ├── locales
|  ├── ar
|  |  ├── errors.json
|  |  ├── general.json
|  |  └── warnings.json
|  ├── en
|  |  ├── errors.json
|  |  ├── general.json
|  |  └── warnings.json
├── src
|  ├── App.js
|  ├── i18n.js

i18n.js

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
// load translation using xhr -> see /public/locales
.use(Backend)
// detect user language
.use(LanguageDetector)
.init({
fallbackLng: 'en',
debug: false,
defaultNS: 'general',
ns: ['general', 'errors', 'warnings'],
backend: {
loadPath: `${window.location.pathname}locales/{{lng}}/{{ns}}.json`
},
load: 'unspecific',
// special options for react-i18next
// learn more: https://react.i18next.com/components/i18next-instance
react: {
wait: true
}
});
export default i18n;

组件

命名空间根据需要包含在每个组件中(除"defaultNS"配置之外的任何配置(

class MyComponent extends React.Component{...}
export default withNamespaces('general', 'errors')(MyComponent)