你可以使用 Vike 扩展 vike-photon ↗ 将 Vike ↗ 应用部署到 Cloudflare。
支持所有应用类型（SSR/SPA/SSG）。
VikeDetected
Generated configuration
wrangler.jsonc
main:dist/server/index.js
wrangler.jsonc
assets:directory: dist/client
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
observability:enabled: true
WorkersDeployed
Wrangler handles configuration automatically
Vike ↗ 是面向高级应用的 Next.js/Nuxt 替代方案，采用模块化架构，提供前所未有的灵活性和稳定性。
使用 vike.dev/new ↗ 搭建使用 vike-photon 和 @photonjs/cloudflare 的新 Vike 应用。
npm i wrangler vike-photon @photonjs/cloudflareyarn add wrangler vike-photon @photonjs/cloudflarepnpm add wrangler vike-photon @photonjs/cloudflarebun add wrangler vike-photon @photonjs/cloudflare-
pages/+config.tsdiff import type { Config } from 'vike/types' + import vikePhoton from 'vike-photon/config' export default { + extends: [vikePhoton] } satisfies Config -
package.jsondiff { "scripts": { "dev": "vike dev", + "preview": "vike build && vike preview", + "deploy": "vike build && wrangler deploy" } }wrangler.jsoncdiff + { + "$schema": "node_modules/wrangler/config-schema.json", + "compatibility_date": "2025-08-06", + "name": "my-vike-cloudflare-app", + "main": "virtual:photon:cloudflare:server-entry", + // Only required if your app depends a Node.js API + "compatibility_flags": ["nodejs_compat"] + } -
.gitignorediff + .wrangler/ -
（可选） 默认情况下，Photon 使用内置服务器，支持 SSR 等基本功能。若需要额外的服务器功能（例如文件上传 ↗或 API 路由 ↗），请创建自己的服务器 ↗。
要访问 Cloudflare API（例如 D1 和 KV），请使用绑定（binding），可通过从 cloudflare:workers 导入的 env 对象 访问。
import { env } from 'cloudflare:workers'
// Key-value store
env.KV.get('my-key')
// Environment variable
env.LOG_LEVEL
// ...使用 Cloudflare D1 的示例：
npm create vike@latest -- --react --hono --drizzle --cloudflareyarn create vike --react --hono --drizzle --cloudflarepnpm create vike@latest --react --hono --drizzle --cloudflare或前往 vike.dev/new ↗ 并选择
Cloudflare与 ORM。
若使用 TypeScript，每次更改 Cloudflare 配置时运行 wrangler types 以更新 worker-configuration.d.ts 文件。
npx wrangler typesyarn wrangler typespnpm wrangler types然后提交：
git commit -am "update cloudflare types"确保 TypeScript 加载该文件：
{
"compilerOptions": {
+ "types": ["./worker-configuration.d.ts"]
}
}