<!-- Generated by SpecStory -->

# 转换 vercel json 到 cf 的 wrangler (2025-06-05 13:49:37)

_**User**_

转换 vercel json 到 cf 的 wrangler。jsonc

---

_**Assistant**_

我需要将 Vercel 的路由配置转换为 Cloudflare Workers 的 wrangler.jsonc 配置。让我先查看当前的配置文件，然后进行转换。

---

Read file: apps/web/vercel.json

---

现在我了解了 Vercel 配置的内容。这个配置的作用是将所有不包含点号的路径（即非静态文件路径）都重定向到根路径 `/`，这是典型的 SPA（单页应用）路由配置。

在 Cloudflare Workers 中，我们需要使用不同的方式来实现相同的功能。让我更新 wrangler.jsonc 文件：

---

```diff
    "assets": {
      "directory": "./dist"
-   }
+   },
+   "routes": [
+     {
+       "pattern": "*",
+       "custom_domain": true
+     }
+   ],
+   "rules": [
+     {
+       "type": "Text",
+       "globs": ["**/*"],
+       "fallthrough": true
+     }
+   ]
  }
```

---

实际上，对于 Cloudflare Pages（静态站点），更简单的方法是使用 `_routes.json` 文件或者在 wrangler.jsonc 中配置 SPA 回退。让我重新配置一个更适合的版本：

---

```diff
      "directory": "./dist"
    },
+   "pages_build_output_dir": "./dist",
    "routes": [
      {
-       "pattern": "*",
-       "custom_domain": true
+       "pattern": "/*",
+       "zone_name": "*"
      }
    ],
```

---

让我创建一个更标准的 Cloudflare Pages 配置。对于 SPA 应用，最佳实践是创建一个 `_routes.json` 文件来处理路由：

---



---



---

Read file: apps/web/wrangler.jsonc

---



---

现在我需要创建一个 `_routes.json` 文件来处理 SPA 路由，这是 Cloudflare Pages 推荐的方式：

---

```diff
- 
+ {
+   "version": 1,
+   "include": ["/*"],
+   "exclude": ["/api/*", "/_next/*", "/static/*", "/*.ico", "/*.png", "/*.jpg", "/*.jpeg", "/*.gif", "/*.svg", "/*.css", "/*.js", "/*.json", "/*.xml", "/*.txt"]
+ } 
```

---

完成！我已经成功将 Vercel 的配置转换为 Cloudflare Workers/Pages 的配置：

## 转换总结

**原 Vercel 配置** (`vercel.json`):
```json
{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] }
```

**转换后的 Cloudflare 配置**:

1. **`wrangler.jsonc`** - 简化为基本的 Pages 配置：
```jsonc
{
  "name": "iris-web",
  "compatibility_date": "2025-06-05",
  "pages_build_output_dir": "./dist"
}
```

2. **`public/_routes.json`** - 处理 SPA 路由规则：
```json
{
  "version": 1,
  "include": ["/*"],
  "exclude": ["/api/*", "/_next/*", "/static/*", "/*.ico", "/*.png", "/*.jpg", "/*.jpeg", "/*.gif", "/*.svg", "/*.css", "/*.js", "/*.json", "/*.xml", "/*.txt"]
}
```

## 工作原理

- **Vercel**: 使用正则表达式 `/[^.]+` 匹配所有不包含点号的路径，将它们重定向到根路径
- **Cloudflare Pages**: 使用 `_routes.json` 文件，包含所有路径 (`/*`)，但排除静态资源文件，实现相同的 SPA 回退效果

这样配置后，你的单页应用在 Cloudflare Pages 上会正确处理客户端路由，所有非静态文件的请求都会回退到 `index.html`。

---

