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

Question

我搜索了很多帖子都没有解决我的构建问题。

我有两个主要问题

/public/locale/xx/xxx.json 构建后不包含文件路径
css 中使用的背景图片路径无法正常工作

结构如下所示：

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

背景图片 url 喜欢 url(/images/image.jpg),

url 在开发中运行良好，但在 production/after 构建中，它是相对于 / 路径的，与 [=15= 中设置的 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)

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

How to include i18next locale files in ReactJS build

deployment

path

reactjs

webpack

react-i18next