如何配置Gatsby实现构建页面输出为扁平层级而非嵌套目录结构

你使用的v3.10.2版本完全支持该需求，可通过以下两种方法实现：

方法1：全局配置（推荐，无需修改业务代码） #

Gatsby v3+原生支持trailingSlash全局配置项，直接在gatsby-config.js中添加如下配置即可：

module.exports = {
  trailingSlash: "never",
  // 保留你的其他原有配置
}

该配置会禁止Gatsby自动为路径添加尾部斜杠，构建时会将/about这类路径直接生成为about.html文件，而非about/index.html，完全匹配你期望的输出结构，且路由访问逻辑不需要调整，访问/about依然可以正常加载页面。

方法2：修改createPage参数（仅针对部分页面生效时使用） #

如果你只需要部分页面输出为扁平HTML，不想改全局配置，可以直接在创建页面时给path参数添加.html后缀，同时修正你原有代码里的变量名笔误即可：

function createPages({ actions: { createPage } }) {
    const pagesList = [
        {
            path: '/',
            component: LandingTemplate,
            context: {},
        },
        {
            path: '/about.html', // 直接添加.html后缀
            component: AboutUsTemplate,
            context: {},
        },
    ]

    // 404 — Always last
    pagesList.push({
        path: '/404.html',
        matchPath: '/*',
        component: NotFoundTemplate,
        context: {},
    });

    // 原有代码此处存在变量名笔误：pagesList写成了pageList，需修正
    for (const page of pagesList) {
       createPage(page);
    }
}

使用该方法构建后直接生成about.html，如果需要兼容/about路径访问，额外配置部署服务的路由规则即可。

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