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

Question

我创建了 JHipster React 应用程序（整体 - 支持多种语言 En - Ar），并稍后尝试按照提到的步骤安装德语 此处。

我在 chrome 控制台中遇到以下错误： 获取 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 (标题) 中，有一个列表切换语言，启动时，语言是 AR，但应用程序在启动时如下所示（localhost：9000）：

然后无法更改语言，只能更改为英语一次。

Answer 1

将以下行添加/修改到 /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
            ],
          },
        }),