使用 Gatsby 创建 React App index.html 个问题

Question

我有一个要转换为 Gatsby 的 Create-React-App 项目。它包含所有内容，src 文件夹、index.js 等，还有一个 public 文件夹。然而，这个 public 文件夹随后被 Gatsby 用来做他们做的任何事情。

不幸的是，当他们将文件放入 public 文件夹时，它删除了我的文件。

我的问题很简单：我可以把我的 index.html 文件放在哪里，这样它就不会被 Gatsby 删除。我无法摆脱它，因为 React 不知道将代码放在哪里，而且我无法为我的 Favicons 充电。

我在尝试学习 Gatsby 和一切方面感到迷茫，这是阻止我创建第一个 Gatsby 应用程序的最后障碍之一。

Answer 1

任何 Gatsby 项目中的典型结构如下所示：

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

/src 中的所有内容都被编译成 /public。 public 文件夹在每个 build/compilation 中被覆盖，所以你的代码不能在那里，这就是为什么在你的场景中被删除的原因。您的逻辑必须保持在 /src 以下。所以总结一下，你必须部署你的 /public 文件夹并在 /src.

中开发

回答您的问题，您的 index.html 将在 /src/index.js 之下。由于 Gatsby 默认情况下采用 /pages 结构并将其复制到 /public 中的页面中。因此，/pages 第一级以下的所有内容都将转换为 domain.com/page-name。如果您在 /src 中放置一个文件夹，例如 /blog（第二层），其中的所有内容都将转换为 domain.com/blog/page-name，依此类推嵌套文件夹。

关于 favicon，Gatsby 是一个基于插件的框架，您可以手动或使用有用的插件之一，例如 gatsby-plugin-manifest。

我建议您开始阅读 this documentation 以了解 Gatsby 的工作原理。

使用 Gatsby 创建 React App index.html 个问题

Create React App index.html issues with Gatsby

reactjs

gatsby

create-react-app