跳转到内容

从Gridsome迁移到Astro

Gridsome 是一个基于 Vue 和 GraphQL 构建的开源静态站点生成器。

Gridsome 和 Astro 之间的关键相似点

Gridsome 和 Astro 有一些相似之处,这将帮助你迁移你的项目:

Gridsome 和 Astro 之间的关键差异

当你在 Astro 中重建你的 Gridsome 网站时,你会注意到一些重要的差别:

  • Gridsome 是一个基于 Vue的单页应用程序(SPA)。而 Astro 站点是多页应用程序,它们使用.astro 组件构建,但也可以支持 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit 和原生HTML模板。

  • 作为 SPA,Gridsome 使用vue-router进行 SPA 路由,并使用vue-meta管理<head>。在 Astro 中,你将创建独立的 HTML 页面,并直接控制你的页面<head>,或在布局组件中控制。

  • 本地文件数据:Gridsome 使用 GraphQL 从你的项目文件中检索数据。Astro 使用 ESM imports 和Astro.glob()助手从本地项目文件中导入数据。远程资源可以使用标准的fetch()API加载。GraphQL 可以选择性添加到你的项目中,但默认情况下不包含。

从 Gridsome 切换到 Astro

要将 Gridsome 博客转换为 Astro,可以从我们的博客主题启动模板开始,或者在我们的主题展示中查看更多社区博客主题。

你可以向create astro命令传递一个 --template 参数来使用我们的官方启动器开始一个新的 Astro 项目。或者,你可以从 GitHub 上的任何现有 Astro 仓库开始一个新项目

Terminal window
npm create astro@latest -- --template blog

将你现有的 Markdown 文件(或 MDX 文件,如果你选择了我们的可选集成)作为内容创建 Markdown 或 MDX 页面

由于 Gridsome 的项目结构与 Astro 的类似,你可能可以将你项目中的一些现有文件复制到你新的 Astro 项目的同一位置。然而,两个项目的结构并不完全相同。你可能想要查看Astro 的项目结构以了解有哪些差异。

由于 Astro 比 Gridsome 以不同的方式查询并导入你的本地文件,你可能想要阅读有关如何使用Astro.glob()加载文件的文章,以理解如何处理你的本地文件。

要转换其他类型的网站,例如作品集或文档网站,请在astro.new上查看更多官方启动模板。你将找到每个项目的 GitHub 仓库链接,以及一键打开 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中的工作项目的链接。

社区资源

更多迁移指南