1

在将一个反应应用程序转换为实现了 il8n 的单个 spa 之后，我遇到了一个问题，即无法访问 translate.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 中导入 import "./i18n";

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

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

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",
      },
    },
  });
};

尝试了解决方案但仍然没有解决 Reactjs - 加载翻译文件时出错

4

1 回答 1

2

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

  • 用于__webpack_public_path__动态创建正确的 URL 以指向此微前端提供的资产，例如。loadPath: `${__webpack_public_path__} /locales/{{lng}}/{{ns}}.json`,
  • 如果您有单独的 i18n 服务，请将 URL 指向该服务。这也可能需要crossDomain并且withCredentials取决于它的配置方式。
于 2021-05-24T14:03:48.930 回答