React i18next Backend-Path отличается в локальной и производственной среде - PullRequest
Новая
       3

React i18next Backend-Path отличается в локальной и производственной среде

0 голосов
/ 16 января 2020

Я использую приложение реагирования с react-i18next и загружаю перевод с i18next-xhr-backend

i18n
  .use(Backend) 
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    lng: "de",
    backend: {
      loadPath: '/static/locales/{{lng}}/{{ns}}.json'
    }        
  });

Если я запускаю его локально, мое приложение обслуживается через http://localhost:3000/

и файл перевода также прекрасно загружается (sr c находится в public/statuc/locales/) http://localhost:3000/static/locales/de/translation.json

Теперь я сталкиваюсь с проблемой, заключающейся в том, что в рабочем режиме приложение не обслуживается с root, вместо построенные файлы обслуживаются в подпапках. Из-за этого я изменил свой packages.json и добавил homepage 

{
  "name": "myapp",
  "version": "0.1.0",
  "homepage": "/static/app/",
  ...
}

После сборки приложения и его развертывания на prod оно все равно загружается правильно, но файлы перевода не найдены.

http://production.tld/static/app/index.html

реактивные файлы приложения загружены правильно http://production.tld/static/app/static/js/main*. js

, но файл перевода по-прежнему выбирается на http://production.tld/static/locales/de/translation.json, который больше не доступен (вместо http://production.tld/static/app/static/locales/de/translation.json будет правильно)

Я мог бы исправить это, изменив конфигурацию i18n 

 backend: {
     loadPath: '/static/app/static(locales/{{lng}}/{{ns}}.json'
 }

тогда он работает в производстве, но уже не локально: - /

Я не уверен, как избежать этой ситуации?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Другим решением было бы работать с переменными среды. Только условие было бы другим и без функции, идея похожа на решение @ felixmo sh.

Пример с create-Reaction-app , здесь вы можете использовать переменная окружения 'NODE_ENV' для условия. 

i18n.use(XHR)
.use(initReactI18next)
.init({
    backend: {
        loadPath:
            process.env.NODE_ENV !== "production"
                ? `./locales/{{lng}}/{{ns}}.json`
                : ` /static/app/static/locales/{{lng}}/{{ns}}.json`,
    },
    lng: "de",
    fallbackLng: "de",
    load: "languageOnly",
    debug: true,
    react: {
        transSupportBasicHtmlNodes: true,
        transKeepBasicHtmlNodesFor: ["br", "strong", "i", "sub", "sup", "li"],
    },
});

Здесь приведена документация create-реагировать-приложение https://create-react-app.dev/docs/adding-custom-environment-variables

0 голосов
/ 16 января 2020

Вы можете передать loadPath как функцию . 

backend: {
  loadPath: () => {
    // check the domain
    const host = window.location.host;
    return (host === 'production.ltd' ? '/static/app':'') + '/static/app/static(locales/{{lng}}/{{ns}}.json';
  },
},
...