写 Vue，生成可维护的 React。
自动化 Vue 转 React 编译工具，将 Vue 3 SFC・Script・Style 完整转为纯 React 18+ 组件（非运行时桥接）
覆盖
<script setup>核心全特性，支持渐进式迁移和混合开发
在线体验 · 快速开始 · 适用场景 · 生态集成 · 编译约定 · 转换对照 · 更新日志
.gif)
VuReact 实战：Vue 3 SFC → React 18+ 组件编译演示。
.gif){kind=link}
其他方案要么是运行时套壳（性能差、调试难），要么是半成品转换（复杂语法就报错）。VuReact 是编译时方案，产物是纯 React 代码，没有 Vue 运行时，支持渐进迁移。
| 其他方案 | VuReact |
|---|---|
| 运行时套壳（双框架，性能差，包体大） | 编译时，产物纯 React，可渐进迁移，逐模块编译 |
| 半成品转换（复杂语法报错） | 完整模板指令、Props、插槽、Composition API、scoped 样式、 TS 类型定义等 |
| AI 改写（结果不确定，代码基于猜测，需人工二次审核） | 确定性编译，基于 AST 静态转换，结果可预测、可追溯 |
👉 深入了解请访问：为什么选择 VuReact？—— 不止是语法转换
30 秒体验 Vue → React 完整编译流程：
💡 示例均托管至 CodeSandbox，打开后自动运行，请耐心等待一会！
- 🧠 语义级编译，不是字符替换：分析模板、
<script setup>、组合式 API、TS 类型等完整语义，生成符合 React 习惯的代码。 - 🎯 约定优先，可控可维护：不追求“什么都能转”，基于明确的编译约定，确保转换结果可预测、可分析。
- 📦 渐进迁移：从单文件到整个项目逐步推进，不需要一次性重写。
- ⚛️ 完整特性适配：响应式 API、生命周期、内置组件、路由等 Vue 核心特性完整适配到 React；
scoped/module样式和 Less/Sass 均在编译阶段处理，零运行时开销。 - ⚡ 自动依赖分析：顶层函数自动注入
useCallback，变量声明自动注入useMemo，hooks 依赖自动追踪。 - 🛠️ 双模式 CLI：
vureact build（极速增量编译）+vureact watch（文件监听），开发体验接近原生。
💡 从零开始的官方指南：VuReact 快速入门
💡 混合项目迁移实践：客户支持协同后台（Vue + React）
在你的 Vue 3 项目下，选择任意方式安装：
npm i -D @vureact/compiler-core在项目根目录下，创建 vureact.config.ts 文件：
import { defineConfig } from '@vureact/compiler-core';
export default defineConfig({
input: '', // 输入路径，支持单文件或目录
exclude: ['src/main.ts'], // 排除 Vue 入口与不参与编译的文件
output: {
workspace: '.vureact',
outDir: 'react-app',
bootstrapVite: true,
},
onSuccess: async () => {
console.log('编译成功！');
// 这里可以执行额外的操作，比如操作文件系统、调用其他工具等
},
});💡 更多配置项详见： 配置 API
{
// 单 SFC 试点，需使用 <script setup>
input: './src/your-component.vue',
}{
// 支持多级目录递归，输入任意目录即可
// 注意：所有组件必须使用 <script setup>（否则会报错）
input: './src',
}💡 注意：若项目使用了 Vue Router，请查看 路由适配指南 进行配置。
npx vureact build自动生成的 .vureact/react-app 目录里，包含了转换后的组件和相关依赖配置等。
项目结构大致示例：
vue-project/
├── .vureact/ # 工作区（编译生成）
│ ├── cache/ # 编译缓存
│ ├── react-app/ # 转换后的 React 工程
│ │ ├── src/ # 转换后的 React 代码
│ │ ├── package.json # React 项目依赖
│ │ ├── vite.config.ts # Vite 配置
│ │
├── src/ # 原始 Vue 代码
├── package.json # 原始项目依赖
└── vureact.config.ts # 配置文件# 全量/增量编译
npx vureact build
# 开发模式，监听文件变化自动编译
npx vureact watch
# 查看版本
npx vureact -v
# 查看帮助
npx vureact --help👉 build/watch 指南详见：Build 增量编译 | Watch 监听模式
- 遇到问题？查看 FAQ 或 提交 Issue
- 路由适配有疑问？查看路由适配指南
- 页面样式异常？查看解决方案
- 使用感受？来 Discussions 聊聊
- 想支持我们？点个 ⭐ 让更多人看到这个项目
- 项目需从 Vue 3 渐进式迁移到 React，但不想从头重写，优先寻找现有解决方案
- 部分开发者以 Vue 为主技术栈，习惯其心智模型，认为 React 的额外负担比 Vue 更重
- 后端开发者不想学习双框架，Vue 上手快、符合直觉，不愿接触 React
- 转换后的 React 需完全脱离 Vue 运行时，避免双框架运行时所带来的性能和体积问题
- 优先可控：服务于可控工程场景
- 约定驱动：需要遵守明确的编译约定
- 现代语法：专注于 Vue 3 Composition API 与
<script setup>
可选 ☣️混合编写，Vue 项目直接引入 React 生态能力。
- VuReact Runtime：提供轻量级 React 版的 Vue 核心组件 & API
- VuReact Router：基于 React Router DOM 的 Vue Router 风格适配层
Runtime 适配层的开发得到了以下项目的启发和支持：
- valtio — React 的 Vue 风格响应式 API 和 Proxy 实现
- react-transition-group — React 过渡动画组件
欢迎提交 Issue 和 Pull Request！请先阅读 贡献指南。
MIT License © 2025 Ruihong Zhong (Ryan John)
VuReact 的持续发展离不开社区的支持，您的赞助将直接用于项目维护、功能开发和文档完善，帮助我们共同探索 Vue 到 React 编译的技术边界。
平台：爱发电
第一个使用案例正在征集中，如果你试用了 VuReact，欢迎告诉我们！你可以通过 Issue 模板提交案例：
我们会定期从这些案例中整理出适合公开展示的条目。
VuReact - 验证"Vue 到 React 完整编译"这一长期技术设想的可行性，通过创新的编译架构和运行时适配，实现前所未有的转换深度和工程完整性。