# Nuxt 应用部署到 Cloudflare

URL: https://caijiao.org/posts/14
Source: docs/posts/14.md
Description: 本文介绍如何将 Nuxt 应用部署到 Cloudflare 基础设施，包括 Cloudflare Pages、Git 集成、路由匹配以及使用 Wrangler 直接上传。

## Cloudflare Pages

Cloudflare Pages 提供 **零配置** 部署 Nuxt 应用的能力。  
集成 Cloudflare Pages 时，你无需额外配置，项目即可自动构建和部署。

- 你可以查看 [@nuxthub/core](https://hub.nuxt.com) 模块，以便在 Cloudflare 上构建完整的 Nuxt 全栈应用。

### Git 集成

如果使用 GitHub 或 GitLab 与 Cloudflare Pages 集成，可以先了解 [Git](/git/) 的基础流程：

- 不需要额外配置。
- 将代码推送到仓库后，Cloudflare Pages 会自动构建并部署你的项目。
- Nuxt 会自动检测环境，并设置正确的 Server/Nitro 预设。

### 构建命令

根据你的需求选择构建命令：

- **开启边缘服务器端渲染（SSR）**：

```bash
nuxt build
````

- **静态生成网站**：

```bash
nuxt generate
```

## 路由匹配

在 Cloudflare Pages 上：

- 如果找到匹配当前请求路径的 [HTML](/html/) 文件，则会直接返回该文件。
- HTML 页面会被重定向到无扩展名的路径。例如：

  - `/contact.html` 会重定向到 `/contact`
  - `/about/index.html` 会重定向到 `/about/`

> 为了匹配 Cloudflare 的路由规则，需要在 Nuxt 中设置 `autoSubfolderIndex` 为 `false`。

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})
```

## 直接上传（Wrangler）

如果你希望直接使用 Wrangler 上传项目到 Cloudflare：

1. 构建项目并设置预设为 Cloudflare Pages：

```bash
npx nuxi build --preset=cloudflare_pages
```

2. 部署项目（首次部署会提示创建 Cloudflare Pages 项目）：

```bash
npx wrangler pages deploy dist/
```

这样，你的 Nuxt 应用就可以部署到 Cloudflare 基础设施上，并支持 SSR 或静态生成。