目录和文件

每个 Astro 项目的根目录下都应该包括以下目录和文件：

• src/* - 你的项目源代码（组件、页面、样式等）。
• public/* - 你的非代码、未处理的资源（字体、图标等）。
• package.json - 项目清单。
• astro.config.mjs - Astro 配置文件（推荐）。
• tsconfig.json - TypeScript 配置文件（推荐）。

例如下面结构:

• Directorypublic

  • robots.txt
  • favicon.svg
  • social-image.png
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Button.jsx
  • Directorylayouts

    • PostLayout.astro
  • Directorypages

    • Directoryposts

      • post1.md
      • post2.md
      • post3.md
    • index.astro
  • Directorystyles

    • global.css
• astro.config.mjs
• package.json
• tsconfig.json

src/

大部分项目源代码所在的地方:

• 页面
• 布局
• Astro 组件
• UI 框架组件（React 等）
• 样式（CSS、Sass）
• Markdown

src/components

通常将你项目中所有组件都分组放在这个文件夹中。 组件是你在 HTML 页面中可重复使用的代码单元.

src/content

被保留用于存储内容集合和可选的集合配置文件。此文件夹中不允许有其他文件。

src/layouts

定义一个或多个页面共享的 UI 结构的 Astro 组件。 和 src/components 一样，这个目录也只是约定俗成，但不是必需的。 ( Astro 保留的目录只有 src/pages/ 和 src/content/)

src/pages

用于创建新的页面的特殊组件。一个页面可以是一个 Astro 组件，也可以是表示站点某些页面内容的 Markdown 文件。

Caution

src/pages 是 Astro 项目中必须要有的子目录。没有它，你的网站将没有任何页面或路径！

src/styles

将 CSS 或 Sass 文件存储在 src/styles 目录中是一种常见的约定，但这不是必需的。只要你的样式位于 src/ 目录中的某个位置并且正确导入，Astro 就会处理和压缩它们。

public/

用于项目中不需要在 Astro 构建过程中处理的文件和资源。这个文件夹中的文件将会被原封不动地复制到构建文件夹中，然后你的网站将被构建。

这种行为使得 public/ 成为存放图片和字体等普通资源或 robots.txt 和 manifest.webmanifest 等特殊文件的理想选择。(其他文件夹内的文件通过run build处理后文件名会被修改,最终使得某些链接失效)

你也可以把 CSS 和 JavaScript 放在 public/ 目录中，但要注意这些文件不会在最终构建中被打包或压缩。(一般而言，你自己编写的 CSS 或 JavaScript 都应该放在 src/ 目录下。)

package.json

JavaScript 包管理器用它来管理依赖关系。它也定义了通常用于运行 Astro 的脚本（例如：npm start、npm run build）。

在 package.json 中可以指定两种依赖关系：dependencies 和 devDependencies。在大多数情况下它们效果一样，Astro 在构建时需要所有依赖，而你的包管理器则会同时安装这两种依赖。我们建议把所有的依赖项放在 dependencies 中，只有在你发现有特殊需要后，再使用 devDependencies。

如果想要为你的项目创建新的 package.json 文件时遇到困难，请查看手动设置中的说明。

astro.config.mjs

该文件在每个入门模板中都会生成，它包括你的 Astro 项目的配置。可以在这里指定要使用的集成、构建选项、服务器选项以及其他内容。

参见配置参考了解关于配置的更多细节。

tsconfig.json

该文件在每个入门模板中都会生成，它包括你的 Astro 项目的 TypeScript 配置项。如果没有 tsconfig.json 文件，编辑器将不完全支持某些功能（如 npm 包的导入）。

参见 TypeScript 指南了解关于配置的更多细节。