国际化 React jhipster 应用程序时出错（未找到资源：9000/i18n/de.json?_=ec3c1ea9a5a8fd2043ce89c304a07566:1）

Question

我已经创建了一个 JHipster React 应用程序（单体 - 支持多种语言 En - Ar），稍后尝试按照提到的步骤安装德语 here。

我在 chrome 控制台中遇到以下错误： GET http://localhost:9000/i18n/de.json?_=c6175d5ef7eefd083a22cc4c402c57a1 404（未找到）.

我已经创建了文件 src\main\webapp\i18n\en..，ar 和 de 也是如此，在服务器端：src/main/resources/i18n/messages_en.properties 和（ar 和 de）文件。但是到现在发现ui里面没有可以切换语言的地方，所以我尝试修改以下文件如下：

dayjs.ts（初始状态）：

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

// jhipster-needle-i18n-language-dayjs-imports - JHipster will import languages from dayjs here
import 'dayjs/locale/en';
import 'dayjs/locale/ar';
import 'dayjs/locale/de';

// DAYJS CONFIGURATION
dayjs.extend(customParseFormat);
dayjs.extend(duration);
dayjs.extend(relativeTime);

locale.ts:

import axios from 'axios';
import dayjs from 'dayjs';
import { createSlice } from '@reduxjs/toolkit';

import { AppThunk } from 'app/config/store';
import { TranslatorContext } from 'react-jhipster';

const initialState = {
  currentLocale: 'ar',
};

export type LocaleState = Readonly<typeof initialState>;

export const setLocale: (locale: string) => AppThunk = locale => async dispatch => {
  if (!Object.keys(TranslatorContext.context.translations).includes(locale)) {
    const response = await axios.get(`i18n/${locale}.json?_=${I18N_HASH}`, { baseURL: '' });
    TranslatorContext.registerTranslations(locale, response.data);
  }
  dispatch(updateLocale(locale));
};

export const LocaleSlice = createSlice({
  name: 'locale',
  initialState: initialState as LocaleState,
  reducers: {
    updateLocale(state, action) {
      const currentLocale = action.payload;
      if (state.currentLocale !== currentLocale) {
        dayjs.locale(currentLocale);
        TranslatorContext.setLocale(currentLocale);
      }
      state.currentLocale = currentLocale;
    },
  },
});

export const { updateLocale } = LocaleSlice.actions;

// Reducer
export default LocaleSlice.reducer;

然后在ui(header)中，有一个切换语言的列表，启动时，语言是AR，但是应用在启动时看起来像下面这样(localhost:9000)：

然后只能换一次英语以外的语言。

Answer 1

它在 adding/modifying 以下行到 /jhipster/webpack/webpack 之后起作用。common.js:

 new MergeJsonWebpackPlugin({
          output: {
            groupBy: [
              { pattern: './src/main/webapp/i18n/en/*.json', fileName: './i18n/en.json' },
              { pattern: './src/main/webapp/i18n/ar/*.json', fileName: './i18n/ar.json' },
              { pattern: './src/main/webapp/i18n/de/*.json', fileName: './i18n/de.json' },
              // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
            ],
          },
        }),

国际化 React jhipster 应用程序时出错（未找到资源：9000/i18n/de.json?_=ec3c1ea9a5a8fd2043ce89c304a07566:1）

Error internationalizing a react jhipster app (resource not found :9000/i18n/de.json?_=ec3c1ea9a5a8fd2043ce89c304a07566:1)

internationalization

reactjs

jhipster