Cloudflare 中文文档
Pages
Cloudflare 中文文档
Pages
编辑这个页面
跳转官方原文档
Set theme to dark (⇧+D)
  1. Products
  2. Pages
  3. 框架指南
  4. Nuxt

Nuxt

Nuxt是一个网络框架，使基于 Vue.js 的开发变得简单而强大。

在本指南中，你将创建一个新的 Nuxt 应用程序，并使用 Cloudflare Pages 进行部署。

​​ 使用 create-cloudflare CLI(C3)创建新项目

create-cloudflare CLI (C3)](/pages/get-started/c3/) 将为 Cloudflare 页面配置你的 Nuxt 站点。在终端中运行以下命令创建新的 Nuxt 网站：

C3 会询问一系列设置问题，并使用 nuxi(官方 Nuxt CLI) 创建一个新项目。C3 还将安装必要的适配器和 Wrangler CLI。

创建项目后，C3 将使用默认 Nuxt 模板生成一个新的 my-nuxt-app 目录，该模板已更新为与 Cloudflare Pages 完全兼容。

创建新项目时，C3 会让你选择通过 Direct Upload部署应用程序的初始版本。你可以在项目目录下运行以下命令，随时重新部署应用程序：

​​ 配置和部署不带 C3 的项目

要在没有 C3 的情况下部署 Nuxt 项目，请遵循 Nuxt 入门指南。设置好 Nuxt 项目后，选择 Git 整合指南 或 Direct Upload 指南 在 Cloudflare Pages 上部署 Nuxt 项目。

​​ Git 整合

除了直接上传部署外，你还可以通过Git 集成部署项目。Git 集成允许你将 GitHub 或 GitLab 仓库连接到 Pages 应用程序，并在每次推送新提交后自动构建和部署 Pages 应用程序。

设置需要对 Git 有基本了解。如果你是 Git 新手，请参考 GitHub 的 Git 手册汇总，了解如何在本地机器上设置 Git。

​​ 创建 GitHub 仓库

访问 repo.new，创建一个新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，准备并在终端运行以下命令将本地应用程序推送到 GitHub：

​​ 创建一个页面项目

  1. 登录 Cloudflare 仪表板 并选择你的账户。
  2. 转到 Workers & Pages> Create application> Pages> Connect to Git并创建一个新的 Pages 项目。

如果你尚未授权访问你的 GitHub 帐户，系统将要求你进行授权。Cloudflare 需要这样才能从源代码监控和部署你的项目。如果你愿意，可以缩小对特定版本库的访问范围；但是，当你要向 Cloudflare 页面添加更多版本库时，必须手动更新此列表 在你的 GitHub 设置中。

  1. 选择创建的新 GitHub 仓库，并在 **设置构建和部署**部分提供以下信息：
Configuration option Value
Production branch main
Build command npm run build
Build directory dist

你可以选择自定义项目名称字段。它默认为 GitHub 仓库的名称，但不必与之匹配。项目名称**值将被指定为*.pages.dev子域。

  1. 完成配置后，选择保存并部署。

查看正在进行的第一个部署管道。Pages 按照指定安装所有依赖项并构建项目。Cloudflare Pages 会自动重建项目，并在每次推送新提交时进行部署。

此外，你还可以访问 预览部署，它可以重复拉取请求的构建和部署过程。有了它们，你就可以在将更改部署到生产环境之前，用一个真实的 URL 来预览对项目所做的更改。

​​ 在 Nuxt 应用程序中使用绑定

绑定(binding) 允许你的应用程序与 Cloudflare 开发人员产品交互，如 KV、Durable Objects、R2 和 D1。

如果打算在项目中使用绑定，必须首先为本地和远程开发设置绑定。

​​ 为本地开发设置绑定

通过 C3 创建的项目附带 nitro-cloudflare-dev，这是一个 nitro 模块，可简化开发过程中的绑定工作：

该模块由 getPlatformProxy辅助函数 提供支持。getPlatformProxy 会自动检测项目的 wrangler.toml 文件中定义的任何绑定，并在本地开发中模拟这些绑定。查看Wrangler 关于绑定的配置信息，了解如何在wrangler.toml中配置绑定的更多信息。

​​ 为已部署的应用程序设置绑定

要访问已部署应用程序中的绑定，你需要在 Cloudflare 控制面板中配置你的绑定。

​​ 为 TypeScript 项目添加绑定

要获得适当的类型支持，你需要在项目根目录下创建一个新的 env.d.ts 文件，并声明一个 binding。

下面是添加 KVNamespace 绑定的示例：

​​ 在 Nuxt 应用程序中访问绑定

在 Nuxt 中，通过 Server Routes and Middleware 添加服务器端代码。defineEventHandler() 方法用于定义你的 API 端点，在这些端点中，你可以通过提供的 context 字段访问 Cloudflare 的上下文。通过 context 字段，你可以访问为你的应用程序设置的任何绑定。

下面的代码块展示了在 Nuxt 中访问 KV 命名空间的示例。

​​ 了解更多

完成本指南后，你已成功将 Nuxt 网站部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表