Vue迁移React之Vue一键自动化转换React的方案详解

npm install -D @vureact/compiler-core

import { defineConfig } from '@vureact/compiler-core';

export default defineConfig({
  input: 'src', // 待迁移的 Vue 源码目录
  exclude: ['src/main.ts'], // 排除 Vue 入口文件
  output: {
    outDir: 'react-app', // React 代码输出目录
  },
});

# 完整编译（生产环境）
npx vureact build
# 实时编译（开发调试）
npx vureact watch

<!-- Vue 原代码 -->
<script setup lang="ts">
// @vr-name: Demo
import { ref, computed, watch } from 'vue';
const price = ref(100);
const quantity = ref(2);
const total = computed(() => price.value * quantity.value);
watch(quantity, (newVal) => console.log('数量变化:', newVal));
</script>

// VuReact 自动转换后的 React 代码：Demo.tsx
import { useVRef, useComputed, useWatch } from '@vureact/runtime-core';

const Demo =  memo(() => {
  const price = useVRef(100);
  const quantity = useVRef(2);
  const total = useComputed(() => price.value * quantity.value);
  useWatch(quantity, (newVal) => console.log('数量变化:', newVal));
});

export default Demo;

<!-- Vue 原代码 -->
<template>
  <div class="container"><h1>标题</h1></div>
</template>
<style scoped>
.container { padding: 20px; background: #f5f5f5; }
h1 { color: #333; }
</style>

// 自动生成的 React 代码
import $style from './Component-abc123.module.css';
const Component = () => {
  return (
    <div className={$style.container} data-css-abc123>
      <h1 data-css-abc123>标题</h1>
    </div>
  );
};

/* 自动生成的 CSS Module 文件 */
.container[data-css-abc123] {
  padding: 20px;
  background: #f5f5f5;
}
h1[data-css-abc123] {
  color: #333;
}

# 仅迁移组件目录
npx vureact build --input src/components
# 排除遗留代码目录
npx vureact build --exclude "src/legacy/**/*"

export default defineConfig({
  input: 'src',
  exclude: [
    'src/legacy', // 保留未迁移的 Vue 代码
    'src/main.ts', // 保留 Vue 入口
  ],
  output: { outDir: 'react-app' },
});

{
  "name": "react-app",
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@vureact/runtime-core": "^1.0.0",
    "@vureact/router": "^2.0.1"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^6.0.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript-eslint": "^8.30.1",
    "vite": "^8.0.0"
  }
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

# 1. 安装 VuReact
npm install -D @vureact/compiler-core
# 2. 快速创建配置文件
echo "import { defineConfig } from '@vureact/compiler-core';
export default defineConfig({
  input: 'src',
  exclude: ['src/main.ts'],
  output: { outDir: 'react-app' },
});" > vureact.config.js
# 3. 执行迁移编译
npx vureact build