如何让Gatsby开发模式下使用/public/component而非/pages/component？

针对你遇到的开发模式下Gatsby错误解析/component路径的问题，提供以下几种可行方案：

方案1：自定义开发服务器路由（推荐） #

Gatsby的开发服务器基于Express，可通过gatsby-node.js的钩子拦截请求，直接返回public/component下的静态文件：

在项目根目录创建或修改gatsby-node.js，添加以下代码：

const express = require('express');
const path = require('path');

exports.onCreateDevServer = ({ app }) => {
  // 处理/component主路径请求
  app.get('/component', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'component', 'index.html'));
  });

  // 处理/component下的所有子资源（如CSS、JS、图片等）
  app.get('/component/*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', req.path));
  });
};

重启开发服务器后，访问/component会直接返回public/component/index.html，绕过Gatsby的页面路由机制。

方案2：将子模块产物放到static目录 #

Gatsby会把static目录下的文件原封不动复制到public，且开发模式下直接从static提供服务。你可以：

• 修改子模块的构建配置，将输出目录设为项目根目录的static/component
• 如果子模块是npm依赖，可在package.json中添加前置脚本自动复制产物：

"scripts": {
  "predevelop": "cp -r ./node_modules/your-submodule/dist/* ./static/component/",
  "develop": "gatsby develop",
  "prebuild": "cp -r ./node_modules/your-submodule/dist/* ./static/component/"
}

这样无论开发还是生产模式，/component都会直接指向静态资源，无需额外路由配置。

方案3：动态设置iframe的src路径 #

在渲染iframe的组件中，根据环境变量切换路径：

import React from 'react';

const ComponentIframe = () => {
  const iframeSrc = process.env.NODE_ENV === 'development' 
    ? '/component/index.html' 
    : '/component/';

  return <iframe src={iframeSrc} width="100%" height="600" />;
};

export default ComponentIframe;

注意：此方案需配合方案1的路由配置，否则开发模式下会出现404错误。

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