VuReact

写 Vue，输出可维护的 React。

一个面向 Vue 到 React 迁移、兼具「用 Vue 写 React」双重能力的编译工具链。

将 Vue 3 SFCs・Scripts・Styles 完整转为纯 React（非运行时桥接）， 覆盖 <script setup> 核心全特性，支持渐进式迁移和混合开发。

在线体验 · 快速开始 · 适用场景 · 生态集成 · 编译约定 · 转换对照 · 更新日志

简体中文 | English | 日本語

演示效果（左 Vue 项目 → 右生成 React 应用）

观看展示视频 · 查看高清动图

💡 为什么选 VuReact?

其他方案要么是运行时套壳（性能差、调试难），要么是半成品转换（复杂语法就报错）。VuReact 是编译时方案，产物是纯 React 代码，没有 Vue 运行时，支持渐进迁移。

👉 深入了解请访问：为什么选择 VuReact？—— 不止是语法转换

📖 目录

• 🕹️ 在线体验（无需安装）
• ✨ 核心特性
• 🚀 快速开始
• 🛠️ CLI 命令
• 💬 反馈与交流
• ✅ 适用场景
• 📦 仓库子包
• ♻️ 生态集成
• 🙏 特别鸣谢
• 🤝 贡献
• 📄 许可证
• 🩷 赞助
• 🧩 谁在用

🕹️ 在线体验（无需安装）

30 秒体验 Vue → React 完整编译流程：

• 客户支持后台（混写示例）
• CRM 管理后台（标准示例）

💡 示例均托管至 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

1️⃣ 转换单个 Vue 组件

{
  // 单 SFC 试点，需使用 <script setup>
  input: './src/your-component.vue',
}

2️⃣ 转换整个项目

{
  // 支持多级目录递归，输入任意目录即可
  // 注意：所有组件必须使用 <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      # 配置文件

💡 若出现编译告警，请按提示修改。阅读 编译约定 | 最佳实践 有助于你写出更适合转换的 Vue 代码。

🛠️ CLI 命令

# 全量/增量编译
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 生态能力。

📦 仓库子包

• packages/compiler-core
• packages/runtime-core

♻️ 生态集成

• **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 完整编译"这一长期技术设想的可行性，通过创新的编译架构和运行时适配，实现前所未有的转换深度和工程完整性。