创建 Vite React 项目

创建一个项目

1
2
3
4
npm create vite@latest Liberary -- --template react-ts
cd Liberary
npm i
npm i -D wrangler

创建数据库

1
npx wrangler d1 create liberary_db

（没能成功返回）（需关闭v2的tun模式，成功返回）

把输出里的 database_id 等信息写进 wrangler.toml（放在项目根目录）：

1
2
3
4
5
6
7
name = "react-liberary"
compatibility_date = "2026-01-09"

[[d1_databases]]
binding = "DB"
database_name = "liberart_db"
database_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"

设置本地数据库

在wrangler.toml的最末尾添加上preview_database_id = "DB"

本地开发两种模式（你选最舒服的）

模式 A：推荐（热更新）——wrangler 代理 Vite 开发服务器

这个模式最适合 React/Vite：前端继续热更新，同时 Functions + D1 由 wrangler 注入。

npm run dev

另开一个终端（同目录）：

npx wrangler pages dev --d1 DB -- npm run dev
  • wrangler pages dev 是 Pages 本地开发主命令
  • --d1 DB 把 D1 绑定挂进本地运行环境（DB 就是你的 binding 名）

如果你发现本地 D1 数据每次重启都没了：看下面“持久化”。

模式 B：构建后用 dist 跑（更接近线上，但没热更新）

npm run build
npx wrangler pages dev dist --d1 DB

本地 D1 建表 / 迁移 / 种子数据

直接执行 SQL（本地）

npx wrangler d1 execute liberart_db --local --command \
"CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT);"

本地 D1 数据持久化（避免每次重启清空）

Wrangler 本地数据默认放在 .wrangler/state，也支持用 --persist-to 指定目录（官方在本地数据一章提到这个机制）

你可以这样跑：

npx wrangler pages dev --d1 DB --persist-to .wrangler/state -- npm run dev