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

时间:2018-12-03 07:39:02

标签: reactjs webpack deployment path react-i18next

我搜索了很多帖子,但没有运气来解决我的构建问题。

我有两个主要问题

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

结构如下:

public function old_surah_table($sid){
   $query=$this->db->get_where("table_old_memerization",$sid);
   return $query->result_array();
} 

背景图片的网址为my-app public images image.jpg locale xx xxx.json src

该url在dev上工作良好,但在生产/构建后,它与url(/images/image.jpg)路径有关,而与/中设置的homepage无关

语言环境文件也是如此。

PS package.json不会是homepage,假设它将是/

我的i18n文件如下:

/myapp/

我尝试将后端设置设置为任何内容(i18n use(Backend) ),但是没有任何效果。

这似乎是一个非常普遍的问题,因为我到处都可以找到很多帖子,但是,在运行__dirname | env.PUBLIC_URL,...etc

时,如何正确设置相对路径还没有明确的答案。

如果您有足够的知识,请给出关于虚拟人的分步指南

1 个答案:

答案 0 :(得分:0)

我设法使用以下设置使其工作:

结构:

├── 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)