在浏览器中将 React 转换为静态 HTML/CSS/JS

把任意 React、Vue 或 Svelte 项目变成可以放在任何地方托管的静态文件

React → HTML/CSS/JS

点击或拖拽上传 ZIP 文件

Vite、CRA、Astro、Vue、Svelte——只要有 package.json

无需注册,代码不离开你的浏览器。

支持哪些项目

任何带 package.json、构建产物落在 dist/ 或 build/ 的项目。

来自这些工具

Google AI StudioClaude CodeCursorCodexBolt.newLovablev0

用这些技术写的

ReactVueSvelteSolidAstroViteCreate React App

工作原理

01

上传 React 项目

从 Google AI Studio、Claude Code、Cursor 等 AI 编程工具导出项目 ZIP 文件,拖拽到上传区域。

02

在浏览器中构建

WebContainers 在本地运行真实的 npm install 和构建,代码不会离开你的设备。

03

下载静态文件

获得纯 HTML/CSS/JS 文件,可免费托管到 Cloudflare Pages、Vercel 或 Netlify。

为什么选择 React2Static?

什么都不上传

npm install 和生产构建跑在你自己机器上的 WebContainer 里。没有服务器可传——这也是它免费的原因。

构建失败时告诉你为什么

构建失败通常意味着一屏 npm 日志。我们拿它比对 13 种已知原因,告诉你撞上的是哪一条。一条都对不上时就直说对不上,不猜。

全部列在这里

上线之前先检查产物

对着你即将发布的文件跑 15 项检查:打进包里的 API key、还指着 localhost 的请求、缺失的标题。静态托管背后没有服务器,这些事上线之后没人替你兜。

全部列在这里

常见问题

如何把 React 应用转换为 HTML/CSS/JS?

将 React 项目打包为 ZIP 上传,点击"开始构建"。React2Static 会在浏览器中运行真实的构建流程(npm install + build),输出可下载、可托管到任何平台的纯静态 HTML/CSS/JS 文件。

支持 Google AI Studio 项目吗?

支持。React2Static 专为 Google AI Studio 导出的项目设计,同时兼容 Claude Code、Cursor、Codex 等 AI 编程工具生成的 React 项目——任何带 package.json 的 Vite React 项目都可以。

构建失败了会怎么样?

你会拿到完整日志,外加一句人话诊断:命中的是哪一种已知原因,该改什么。最常见的一种是代码 import 了一个从没写进 package.json 的包。如果一条都对不上,我们就直说对不上,而不是猜——猜错比不说更糟。

我的代码会上传到服务器吗?

不会。整个构建过程通过 WebContainers 技术在你的浏览器本地完成,代码不会离开你的设备。

能不能不离开这个页面就把站点发出去?

可以,发到 Netlify。你授权自己的 Netlify 账号,文件从你的浏览器直接过去,中间没有我们的服务器。也可以直接下载 ZIP,传到 Cloudflare Pages、Vercel 或者别的地方。

转换后的静态网站可以部署到哪里?

任何静态托管平台都可以:Cloudflare Pages、Vercel、Netlify、GitHub Pages 等,均有充足的免费额度。下方的部署教程有完整的分步说明。

部署指南

分步教程,教你把静态文件免费放上线,并绑定自己的域名。