Vue CLI 与 Create React App：传统脚手架的现状与架构对比

@vue/cli 和 create-react-app 曾经是前端工程化的基石，它们通过封装 Webpack 配置降低了入门门槛。但随着 Vite 等基于 ESBuild 和 Rollup 的新工具崛起，两者的局限性日益明显。本文将从架构现状、配置灵活性、构建性能及迁移路径四个维度进行深度对比。

⚠️ 官方状态：维护模式 vs 不再推荐

@vue/cli 目前处于官方维护模式。

• Vue 团队已停止功能更新，仅修复关键安全漏洞。
• 官方文档明确指引新项目使用 create vue（基于 Vite）。

# vue/cli: 创建项目（旧方式）
vue create my-project

# vue: 官方推荐的新方式（Vite）
npm create vue@latest

create-react-app 已被 React 官方文档移除出推荐列表。

• 不再作为 React 入门的首选工具。
• 社区普遍转向 Vite 或全栈框架。

# create-react-app: 创建项目（旧方式）
npx create-react-app my-app

# react: 官方推荐的新方式（Vite）
npm create vite@latest my-app -- --template react

⚙️ 配置方式：开放配置 vs 隐藏配置

@vue/cli 提供相对开放的配置文件。

• 支持 vue.config.js 直接修改 Webpack 配置。
• 无需“弹出”配置即可调整常见选项。

// vue/cli: vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

create-react-app 默认隐藏所有配置。

• 官方不支持直接修改 Webpack 配置。
• 必须使用 eject（不可逆）或第三方工具如 craco。

// create-react-app: craco.config.js (需额外安装)
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

🚀 构建性能：Webpack 瓶颈 vs 现代替代

@vue/cli 受限于 Webpack 的启动速度。

• 大型项目冷启动可能需要数秒甚至更久。
• 热更新（HMR）速度随模块数量增加而下降。

// vue/cli: 启动开发服务器
npm run serve
// 大型项目可能耗时 5-10 秒启动

create-react-app 同样面临 Webpack 性能问题。

• 初始构建和热更新在复杂项目中表现 sluggish。
• 缺乏原生的高效依赖预构建机制。

// create-react-app: 启动开发服务器
npm start
// 大型项目同样面临启动延迟

🔁 迁移路径：转向 Vite 的必要性

@vue/cli 迁移到 Vite 相对平滑。

• Vue 3 项目可直接使用 create vue 重建。
• 配置文件差异较小，主要是 vue.config.js 转为 vite.config.ts。

// vite.config.ts (Vue 迁移后)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': '/src' }
  }
})

create-react-app 迁移到 Vite 需要更多调整。

• 需要替换 public/index.html 结构。
• 环境变量前缀从 REACT_APP_ 变为 VITE_。

// vite.config.ts (React 迁移后)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  envPrefix: 'VITE_' // 注意环境变量前缀变化
})

🤝 相似之处：传统脚手架的共同点

尽管两者服务于不同框架，但作为同一时代的产物，它们有许多共同特征。

1. 📦 基于 Webpack 的构建核心

• 都使用 Webpack 4 或 5 进行打包。
• 支持代码分割、Tree Shaking 和 CSS 提取。

// 两者底层都依赖 Webpack 配置
// webpack.config.js (内部隐藏或暴露)
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' }
};

2. 🛡️ 内置开发服务器

• 都提供基于 webpack-dev-server 的本地预览。
• 支持自动刷新和基础的热模块替换。

# 两者都提供启动命令
npm run serve  # Vue CLI
npm start      # CRA

3. 🧪 测试工具集成

• 都内置了 Jest 测试框架。
• 提供默认的测试配置和脚本。

// 两者都支持直接运行测试
npm run test   # 启动 Jest 监听模式

4. 🌐 环境变量处理

• 都支持通过 .env 文件管理环境变量。
• 仅特定前缀的变量会暴露给客户端代码。

# .env 文件示例
VUE_APP_API_URL=https://api.example.com  # Vue CLI
REACT_APP_API_URL=https://api.example.com # CRA

5. 🔌 插件生态系统

• 都有丰富的插件用于扩展功能（如 PWA、TypeScript）。
• 通过 CLI 插件系统安装。

# 安装插件
vue add pwa      # Vue CLI
# CRA 通常需手动安装库
npm install workbox-webpack-plugin # CRA

📊 总结：关键相似点

🆚 总结：关键差异

💡 架构师建议

@vue/cli 适合维护旧项目 — 但新项目请坚决转向 Vite。它的配置系统比 CRA 更开放，但在构建速度上已落后于时代。

create-react-app 仅适合历史遗留系统 — 它的“零配置”理念曾经先进，但现在变成了“无法配置”的负担。React 生态的未来在于 Vite 和全栈框架。

核心结论：两者都是特定历史阶段的优秀工具 — 但技术债务会随时间累积。对于新架构决策，请优先评估 Vite 生态，除非您有明确的遗留系统维护需求。