vue 构建工具如何选择 | vue-cli 和 vite的区别

原创于 2025-09-24 15:53:02 发布 · 1.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue学习同时被 3 个专栏收录

71 篇文章

订阅专栏

vue项目

70 篇文章

订阅专栏

笔记

68 篇文章

订阅专栏

省流总结：Vue CLI 和 Vite 都是用于构建 Vue.js 项目的工具；

① vue-cli 更适合要高度定制化的、复杂的、稳定的（webpack 构建）、使用 vue2 的项目；

② vite 更适合快速的（浏览器原生ESM + Rollup）（快速启动、快速开发）、vue3项目

如何选择：

需求	推荐工具
新项目，追求极致开发速度	Vite ⚡
老项目升级 Vue 3	vue-cli 🛠
需要 Webpack 插件（如 PWA、SSR）	vue-cli 🏗
简单项目，快速原型开发	Vite 🚀
企业级长期维护项目	vue-cli（或 Vite + 自定义配置）

vue-cli 和 vite的区别

1. 核心区别

对比项	Vite (推荐🔥)	vue-cli (传统)
构建工具	基于 ESM + Rollup	基于 Webpack
启动速度	⚡ 极快（利用浏览器原生 ESM）	🐢 较慢（Webpack 打包）
HMR（热更新）	⚡ 毫秒级	🚀 较快（但比 Vite 慢）
生产构建	Rollup（优化更好）	Webpack（稳定但稍重）
配置复杂度	✅ 更简单（约定优于配置）	⚙️ 较复杂（依赖 `vue.config.js`）
生态插件	🌱 较新（但增长快）	🌳 成熟（Webpack 生态丰富）
适用场景	现代 Vue 3 项目、追求速度	传统项目、需要 Webpack 插件

vite 基于原生 ES6 Modules，生产环境下打包使用 Rollup。
vue-cli 基于 webpack封装，生产环境和开发环境都是基于 Webpack 打包。

生产环境都是基于源代码进行打包的；开发环境下，vite 基于原生 ES6，无需对代码进行打包（省掉了打包过程），浏览器可以直接调用。

2. 使用场景推荐

✅ 推荐使用 Vite 的情况

新项目（尤其是 Vue 3）
- Vite 是 Vue 3 官方推荐 的构建工具，默认支持 <script setup>、Composition API 等新特性。
开发体验要求高
- 启动秒开，HMR 几乎无延迟，适合快速迭代。
轻量级项目
- 不需要复杂 Webpack 配置，如 SSR、微前端等。
未来趋势

Vite 正在成为前端主流工具（React、Svelte 等也支持）。

🛠 推荐使用 vue-cli 的情况

老项目迁移（Vue 2 升级 Vue 3）

如果原项目基于 Webpack，继续用 vue-cli 更稳定。

需要 Webpack 高级功能
- 如 自定义 Loader/Plugin 、微前端（Module Federation） 、复杂代码拆分。
企业级长期维护项目
- Webpack 生态更成熟，遇到问题更容易找到解决方案。

3. 创建命令对比

Vite 创建 Vue 3 项目

npm create vite@latest my-vue-app --template vue
# 或
yarn create vite my-vue-app --template vue
# 或
pnpm create vite my-vue-app --template vue

vue-cli 创建 Vue 3 项目

npm install -g @vue/cli
vue create my-vue-app
# 选择 "Vue 3" 预设

4. 如何选择？

需求	推荐工具
新项目，追求极致开发速度	Vite ⚡
老项目升级 Vue 3	vue-cli 🛠
需要 Webpack 插件（如 PWA、SSR）	vue-cli 🏗
简单项目，快速原型开发	Vite 🚀
企业级长期维护项目	vue-cli（或 Vite + 自定义配置）

5. 未来趋势

Vite 正在取代 vue-cli 成为 Vue 官方默认工具。
Webpack 仍适用于复杂场景，但 Vite 的 Rollup 生态在快速完善。
Nuxt 3、Quasar 等框架已转向 Vite，说明行业趋势。

结论

新手 / 新项目 → 直接用 Vite（更快、更现代）。
老项目 / 需要 Webpack → 继续用 vue-cli。

如果你注重开发速度和现代化体验，Vite 是一个理想选择；而对于需要复杂配置和成熟生态的项目，Vue CLI 依然是稳妥的方案。

vue 全家桶：

vue（核心库）

vue-router（路由方案）

vuex（状态管理方案）

vue 组件库（快速搭建页面 UI 效果的方案）

以及辅助 vue 项目开发的一系列工具：

vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack、大而全）
vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）
vue-devtools（浏览器插件：辅助调试的工具）
vetur（vscode 插件：提供语法高亮和智能提示）