il8n 在转换为单个 spa 后无法在 React 应用程序中工作

Question

将 React 应用程序转换为已实施 il8n 的单个 spa 后，我遇到了无法访问 translation.json 因此无法获取标签的问题。

我是否应该修改 webpack.config.js 中的某些内容以使其正确

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import i18nextHttpBackend from "i18next-http-backend";
import Cookies from "js-cookie";
import LanguageDetector from "i18next-browser-languagedetector";


i18n
  .use(i18nextHttpBackend)
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    lng: Cookies.get("locale") || "es",
    fallbackLng: "en",
    debug: false,
    supportedLngs: ["en", "es"],
    interpolation: {
      escapeValue: false,
    },

  });



export default i18n;

il8n 导入 App.js 导入 "./i18n";

最初在转换为单个 spa 之前，应用程序运行良好并调用 http://localhost:3000/locales/en/translation.json 但是在将应用程序转换为单个 spa 之后，get 请求将失败。 http://single-spa-playground.org/locales/en/translation.json

我确实按照本教程 https://www.youtube.com/watch?v=W8oaySHuj3Y&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=13 将 React 应用程序转换为单个 spa。

WebPack 配置

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
const Dotenv = require("dotenv-webpack");

module.exports = (webpackConfigEnv, argv) => {
  console.log(webpackConfigEnv);
  const defaultConfig = singleSpaDefaults({
    orgName: "WHATEVR",
    projectName: "WHATEVER",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    plugins: [new Dotenv()],
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods":
          "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers":
          "X-Requested-With, content-type, Authorization",
      },
    },
  });
};

已尝试解决方案但仍未解决

Answer 1

问题是以前，React 应用程序还充当提供 index.html 文件以及其他静态资产（例如，您的本地化翻译 json 文件）的服务器。在单水疗中心，情况已不再如此；那现在是根配置。您需要更新 i18next-http-backend loadPath configuration 以便库尝试从不再是根 url 的正确路径中检索它们。在不熟悉你想要实现的目标的情况下，你有两个选择：

使用 __webpack_public_path__ 动态创建正确的 URL 以指向此微前端服务的资产，例如。 loadPath: `${__webpack_public_path__} /locales/{{lng}}/{{ns}}.json`,
如果您有单独的 i18n 服务，请将 URL 指向该服务。这可能还需要 crossDomain 和 withCredentials，具体取决于配置方式。

il8n 在转换为单个 spa 后无法在 React 应用程序中工作

il8n not working in react app after converting to single spa

javascript

reactjs

single-spa