快速入门

从基本的 `package.json` 开始

package.jsonjson

{
	"name": "cloudflare-vite-get-started",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "npm run build && vite preview",
		"deploy": "npm run build && wrangler deploy"
	}
}

安装依赖

npm i -D vite @cloudflare/vite-plugin wrangler

yarn add -D vite @cloudflare/vite-plugin wrangler

pnpm add -D vite @cloudflare/vite-plugin wrangler

bun add -d vite @cloudflare/vite-plugin wrangler

创建 Vite 配置文件并包含 Cloudflare 插件

vite.config.tsts

import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
	plugins: [cloudflare()],
});

Cloudflare Vite 插件默认不需要任何配置，会在应用程序根目录查找 wrangler.jsonc、wrangler.json 或 wrangler.toml。

配置选项请参阅 API 参考。

创建 Worker 配置文件

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "cloudflare-vite-get-started",
	// Set this to today's date
	"compatibility_date": "2026-08-17",
	"main": "./src/index.ts"
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "cloudflare-vite-get-started"
# Set this to today's date
compatibility_date = "2026-08-17"
main = "./src/index.ts"

name 字段指定 Worker 的名称。默认情况下，这也用作 Worker 的 Vite 环境名称（更多信息请参阅 Vite 环境）。 main 字段指定 Worker 代码的入口文件。

有关 Worker 配置的更多信息，请参阅配置。

创建 Worker 入口文件

src/index.tsts

export default {
	fetch() {
		return new Response(`Running in ${navigator.userAgent}!`);
	},
};

对此 Worker 的请求将返回 'Running in Cloudflare-Workers!'，表明代码正在 Workers 运行时中运行。

开发、构建、预览和部署

现在可以启动 Vite 开发服务器（npm run dev）、构建应用程序（npm run build）、预览构建后的应用程序（npm run preview）以及部署到 Cloudflare（npm run deploy）。