Docusaurus多语言切换时URL地址重复叠加问题求助

按照Docusaurus国际化指南测试时，遇到语言切换后URL路径异常叠加的问题，操作流程如下：

• 使用npx create-docusaurus@latest website classic初始化站点；
• 更新docusaurus.config.js配置，代码如下：

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: "My Site",
  tagline: "Dinosaurs are cool",
  favicon: "img/favicon.ico",

  // Set the production url of your site here
  url: "https://your-docusaurus-test-site.com",
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: "/",

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: "facebook", // Usually your GitHub org/user name.
  projectName: "docusaurus", // Usually your repo name.

  onBrokenLinks: "throw",
  onBrokenMarkdownLinks: "warn",

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "fa"],
    localeConfigs: {
      en: {
        htmlLang: "en-GB",
      },
      // You can omit a locale (e.g. fr) if you don't need to override the defaults
      fa: {
        direction: "rtl",
      },
    },
  },

  presets: [
    [
      "classic",
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: "img/docusaurus-social-card.jpg",
      navbar: {
        title: "My Site",
        logo: {
          alt: "My Site Logo",
          src: "img/logo.svg",
        },
        items: [
          {
            type: "docSidebar",
            sidebarId: "tutorialSidebar",
            position: "left",
            label: "Tutorial",
          },
          {to: "/blog", label: "Blog", position: "left"},
          {
            href: "https://github.com/facebook/docusaurus",
            label: "GitHub",
            position: "right",
          },
          {
            type: "localeDropdown",
            position: "right",
          },
        ],
      },
      footer: {
        style: "dark",
        links: [
          {
            title: "Docs",
            items: [
              {
                label: "Tutorial",
                to: "/docs/intro",
              },
            ],
          },
          {
            title: "Community",
            items: [
              {
                label: "Stack Overflow",
                href: "https://stackoverflow.com/questions/tagged/docusaurus",
              },
              {
                label: "Discord",
                href: "https://discordapp.com/invite/docusaurus",
              },
              {
                label: "Twitter",
                href: "https://twitter.com/docusaurus",
              },
            ],
          },
          {
            title: "More",
            items: [
              {
                label: "Blog",
                to: "/blog",
              },
              {
                label: "GitHub",
                href: "https://github.com/facebook/docusaurus",
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

• 执行yarn start启动站点，访问地址为http://localhost:3000/；
• 点击语言下拉菜单切换到French后，地址变为http://localhost:3000/fr/，但切回English时地址仍停留在http://localhost:3000/fr/，再次切换French会变成http://localhost:3000/fr/fr/，反复切换后路径持续叠加为http://localhost:3000/fr/fr/fr/...。

该问题源于开发模式下未生成对应语言的翻译文件，且单实例服务无法正确处理多语言路由切换，可通过以下步骤解决：

1. 生成对应Locale的翻译文件
   执行命令为目标语言提取并生成翻译配置文件：

yarn write-translations --locale fr
yarn write-translations --locale fa

执行完成后，会在website/i18n/fr和website/i18n/fa目录下生成对应的翻译文件。

2. 选择合适的多语言测试方式

• 方式一：单语言独立启动
  为每个语言单独启动服务，分别在不同端口访问测试：

yarn start --locale en
yarn start --locale fr
yarn start --locale fa

每个命令会启动独立服务，可分别访问对应语言版本，不会出现路由叠加问题。

• 方式二：构建后预览
  先构建所有语言版本的静态文件，再通过serve服务预览，这种方式可正常使用语言切换菜单：

yarn build
yarn serve

启动后访问http://localhost:3000，即可正常切换语言，URL路径也会正确跳转。

内容的提问来源于stack exchange，提问作者SoftTimur