Nuxt

Nuxt ↗ 是使基于 Vue.js 的开发简单且强大的 Web 框架。

在本指南中，你将创建新的 Nuxt 应用并使用 Cloudflare Pages 部署。

视频教程

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

create-cloudflare CLI (C3) 将为 Cloudflare Pages 配置 Nuxt 站点。在终端运行以下命令创建新的 Nuxt 站点：

npm create cloudflare@latest -- my-nuxt-app --framework=nuxt --platform=pages

yarn create cloudflare my-nuxt-app --framework=nuxt --platform=pages

pnpm create cloudflare@latest my-nuxt-app --framework=nuxt --platform=pages

C3 将询问一系列设置问题，并使用 nuxi（官方 Nuxt CLI） ↗ 创建新项目。C3 还将安装必要的适配器以及 Wrangler CLI。

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

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

npm run deploy

不使用 C3 配置并部署项目

要在不使用 C3 的情况下部署 Nuxt 项目，请遵循 Nuxt 快速入门指南 ↗。设置 Nuxt 项目后，选择 Git 集成指南或 Direct Upload 指南在 Cloudflare Pages 上部署 Nuxt 项目。

Git 集成

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

设置需要 Git ↗ 的基础知识。如果你是 Git 新手，请参阅 GitHub 的精简 Git 手册 ↗，了解如何在本地设置 Git。

创建 GitHub 仓库

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

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"

git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

创建 Pages 项目

要将站点部署到 Pages：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序）。
选择 Pages 选项卡。
选择 Import an existing Git repository（导入现有 Git 仓库）。
选择你创建的新 GitHub 仓库，然后选择 Begin setup（开始设置）。
在 Set up builds and deployments（设置构建和部署） 部分，提供以下信息：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`dist`

可选：你可以自定义 Project name（项目名称） 字段。它默认为 GitHub 仓库名称，但不必一致。Project name（项目名称） 值将分配为你的 *.pages.dev 子域名。

完成配置后，选择 Save and Deploy（保存并部署）。

查看首次部署流水线进度。Pages 安装所有依赖并按指定方式构建项目。每次推送新提交时，Cloudflare Pages 都会自动重新构建并部署项目。

此外，你还可以使用预览部署，对 pull request 重复构建和部署流程。这样可以在将更改部署到生产环境之前，通过真实 URL 预览项目更改。

在 Nuxt 应用中使用绑定

绑定（binding）允许应用与 Cloudflare 开发者产品（如 KV、Durable Objects、R2 和 D1）交互。

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

设置本地开发绑定

通过 C3 创建的项目包含 nitro-cloudflare-dev，这是一个 nitro 模块，简化了开发期间使用绑定的过程：

export default defineNuxtConfig({
	modules: ["nitro-cloudflare-dev"],
});

此模块由 getPlatformProxy 辅助函数提供支持。getPlatformProxy 将自动检测项目 Wrangler 配置文件中定义的任何绑定，并在本地开发中模拟这些绑定。有关如何在 Wrangler 配置文件中配置绑定的更多信息，请参阅 Wrangler 绑定配置信息。

设置已部署应用的绑定

要在已部署的应用中访问绑定，需要在 Cloudflare 仪表板中配置绑定。

向 TypeScript 项目添加绑定

要获得正确的类型支持，需要在项目根目录创建新的 env.d.ts 文件并声明绑定（binding）。请确保已通过运行 wrangler types 生成 Cloudflare 运行时类型。

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

declare module "h3" {
	interface H3EventContext {
		cf: CfProperties;
		cloudflare: {
			request: Request;
			env: {
				MY_KV: KVNamespace;
			};
			context: ExecutionContext;
		};
	}
}

在 Nuxt 应用中访问绑定

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

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

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

	return {
		// ...
	};
});

export default defineEventHandler(({ context }) => {
	const MY_KV = context.cloudflare.env.MY_KV;

	return {
		// ...
	};
});

了解更多

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