/docs 中所有页面上的简短 HTTP 404 错误

Question

我最近第一次部署了 Docusaurus 站点，但遇到了一个奇怪的路由问题。

/docs 文件夹中的每个页面在直接点击页面时都会短暂呈现 404.html 页面。但是，如果我在侧边栏中单击，页面就会正确呈现。

这只发生在 /docs 文件夹中。如果我单击主页链接，我不会看到 404。

我无法在本地复制此问题。我尝试了yarn start和yarn build/serve，在这两种情况下，应用程序都运行良好。我没有看到任何 404、控制台错误等。404 的响应负载是 OOTB Docusaurus 页面，我没有对其进行任何自定义或处理方式。

附件是一个显示行为的 gif 和一个屏幕截图，显示浏览器在我的非本地主机环境中看到硬 404。

这是我的配置文件：

// @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: 'Guidebook',
    tagline: 'Engineering Information',
    url: 'https://guidebook.our-internal-domain.tools/',
    baseUrl: '/',
    onBrokenLinks: 'throw',
    onBrokenMarkdownLinks: 'throw',
    favicon: 'img/favicon.png',
    organizationName: 'Guidebook',
    projectName: 'Guidebook',

    presets: [
        [
            'classic',
            /** @type {import('@docusaurus/preset-classic').Options} */
            ({
                docs: {
                    sidebarPath: require.resolve('./sidebars.js'),
                    editUrl: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook'
                },
                blog: false,
                theme: {
                    customCss: require.resolve('./src/css/custom.css')
                }
                // debug: true
            })
        ]
    ],
    themeConfig: {
        navbar: {
            title: 'Home',
            logo: {
                alt: 'Home',
                src: 'img/TechnologyGuidebook-Icon_Red_Small.svg'
            },
            items: [
                {
                    type: 'doc',
                    docId: 'intro',
                    position: 'left',
                    label: 'Guidebook'
                },
                {
                    href: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook',
                    label: 'GitHub',
                    position: 'right'
                }
            ]
        },
        footer: {
            style: 'dark',
            links: [
                {
                    title: 'Community',
                    items: [
                        {
                            label: 'Stack Overflow',
                            href: 'https://stackoverflow.com/questions/tagged/docusaurus'
                        }
                    ]
                },
                {
                    title: 'More',
                    items: [
                        {
                            label: 'GitHub',
                            href: 'https://github.com/facebook/docusaurus'
                        }
                    ]
                }
            ],
            copyright: `Copyright © ${new Date().getFullYear()} Guidebook V2, Inc. Built with Docusaurus.`
        },
        prism: {
            theme: lightCodeTheme,
            darkTheme: darkCodeTheme
        }
    }
};

module.exports = config;

Answer 1

我正在使用 Vercel 部署 Docusaurus V2 网站，但在重定向方面遇到了同样的问题。

通过在我的 vercel 中启用 cleanUrls 修复了此问题.json 配置。

Answer 2

我想通了。这不是 Docusaurus 的问题。问题是我们的 CloudFront 基础设施中的配置问题。