Vue CLI

Vue.js 官方推出的命令行工具，用于快速搭建 Vue 项目、提供零配置的 Webpack 开发体验，现已进入维护模式。

技术简介说明

Vue CLI 是 Vue.js 团队开发的官方项目脚手架工具，最初于 2018 年随 Vue 2.x 生态一同推出，旨在解决 Vue 开发者在创建新项目时面临的工程化配置难题。它基于 Webpack 封装，提供了 vue create、vue serve、vue build 等命令，让开发者无需手动编写 Webpack 配置即可获得开箱即用的开发服务器、热更新、代码分割、Tree Shaking 等现代前端工程能力。

在其巅峰时期，Vue CLI 是 Vue 生态中最核心的基础设施之一，几乎每个 Vue 项目都通过它启动。它内建了 Babel、TypeScript、ESLint、PostCSS、CSS Modules、单元测试（Jest/Mocha）、E2E 测试（Cypress）等主流工具链的集成方案，通过交互式提示让用户按需选择。其插件系统（@vue/cli-plugin-*）使得工具链扩展和版本管理变得标准化。

随着 2022 年 Vite 的成熟和 Vue 3 的全面推广，Vue CLI 正式进入维护模式（Maintenance Mode）。Vue 官方团队明确建议使用 create-vue（基于 Vite）作为新项目的首选脚手架。Vue CLI 不再开发新功能，仅接受关键性修复。尽管如此，仍有大量存量 Vue 2 / Vue 3 项目运行在 Vue CLI 之上，理解其架构和配置方式对维护这些项目至关重要。

基本信息

• 官网：https://cli.vuejs.org/
• GitHub：https://github.com/vuejs/vue-cli
• License：MIT
• 最新版本：v5.0.8（2022 年发布，最后一个稳定版本）
• 主要维护者/公司：Vue.js 团队（Evan You 及社区贡献者）
• 维护状态：已进入维护模式（Maintenance Mode），不再开发新功能，仅接受关键安全修复

快速上手

安装

# 全局安装 Vue CLI
npm install -g @vue/cli
 
# 或使用 yarn
yarn global add @vue/cli
 
# 验证安装
vue --version

注意：Vue CLI 5.x 需要 Node.js 12.0.0 及以上版本。推荐使用 Node.js 14.18+ 或 16+ 以获得最佳兼容性。

基础配置

# 使用交互式命令行创建项目
vue create my-project
 
# 选择预设（默认、手动、或远程预设）
# 选择特性：Babel, TypeScript, Router, Vuex, CSS Pre-processors, Linter, Unit Testing, E2E Testing 等
 
# 进入项目目录
cd my-project
 
# 启动开发服务器
vue serve        # 或 npm run serve
 
# 构建生产版本
vue build        # 或 npm run build

最小示例

# 使用默认预设快速创建
vue create hello-vue --default
cd hello-vue
npm run serve

项目结构如下：

hello-vue/
├── node_modules/
├── public/
│   └── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── babel.config.js
├── package.json
└── README.md

核心概念与架构

Webpack 封装

Vue CLI 的核心是对 Webpack 的高层封装。@vue/cli-service 内置了一套经过优化的 Webpack 配置，开发者无需直接编写 webpack.config.js，而是通过 vue.config.js 进行增量配置。内部使用 webpack-chain 以语义化方式操作 Webpack 配置项，支持精细的链式修改。

vue-cli-service

vue-cli-service 是 Vue CLI 的本地命令工具，提供了 serve、build、inspect 等子命令。它负责解析项目配置、加载插件、生成最终 Webpack 配置并执行构建。每个通过 vue create 创建的项目都依赖 @vue/cli-service。

插件系统

Vue CLI 采用插件化架构，核心功能以 @vue/cli-plugin-* 包的形式提供。插件在 vue create 阶段按需安装，并在 vue-cli-service 运行时自动加载。插件可以注入 Webpack 配置、添加 CLI 命令、提供默认配置文件。

@vue/cli（全局 CLI）

@vue/cli 是全局安装的命令行入口，提供 vue create（创建项目）、vue add（添加插件）、vue invoke（触发插件生成器）、vue ui（图形化界面）等全局命令。它不直接参与项目构建，而是协调项目脚手架和插件管理。

核心特性

1. 零配置启动：内建 Babel、PostCSS、ESLint 等工具链集成，vue create 即可生成完整项目
2. 交互式预设选择：支持手动勾选特性组合，并可保存为预设供团队复用
3. 插件化架构：功能通过插件按需注入，支持 Babel、TypeScript、PWA、Router、Vuex、CSS 预处理、单元测试、E2E 测试等
4. 图形化界面（Vue UI）：提供 vue ui 命令启动 Web UI，可视化创建项目、管理依赖、运行任务
5. 远程预设（Preset）：支持将项目配置导出为 JSON 预设，托管到 Git 仓库供团队共享
6. Webpack 链式配置：通过 vue.config.js 的 chainWebpack 选项使用 webpack-chain 精细控制 Webpack 配置
7. 多页面应用支持：通过 pages 配置项支持 MPA（Multi-Page Application）模式
8. 环境模式：支持 .env、.env.development、.env.production 等环境变量文件，按模式自动加载
9. 依赖升级工具：vue upgrade 命令可一键升级所有 Vue CLI 插件到兼容版本
10. 国际化与本地化：CLI 输出支持多语言，包括中文

生态图

Vue CLI 的插件生态以 @vue/cli-plugin-* 为核心，主要包含：

社区插件同样丰富，如 vue-cli-plugin-electron-builder（Electron 桌面应用构建）、vue-cli-plugin-apollo（GraphQL/Apollo 集成）等。

适用场景

1. 遗留 Vue 2 / Vue 3 项目维护：大量生产项目仍基于 Vue CLI 构建，理解其配置对维护至关重要
2. 企业内部标准化脚手架：基于 Vue CLI 的 preset 机制搭建企业级项目模板，统一团队开发规范
3. 需要深度 Webpack 定制的场景：对于已深度依赖 Webpack 生态（如自定义 loader、plugin）的项目，Vue CLI 提供了平滑的 Webpack 配置通道
4. Vue 2 项目开发：Vue 2 项目通常仍使用 Vue CLI 作为脚手架，迁移到 Vite 需额外评估成本
5. Electron / 桌面应用构建：社区插件 vue-cli-plugin-electron-builder 依赖 Webpack，部分项目难以快速迁移
6. 教学与学习 Vue 工程化基础：理解 Vue CLI 的 Webpack 封装有助于学习前端构建工具的核心概念
7. 渐进式迁移评估：对于计划迁移到 Vite 的项目，先了解 Vue CLI 配置有助于制定迁移策略

开发与工程化

开发流程

# 启动开发服务器（默认 localhost:8080）
npm run serve
 
# 指定端口和打开浏览器
vue serve --port 3000 --open
 
# 指定模式
vue serve --mode staging

构建部署

# 生产构建
npm run build
 
# 构建输出到 dist/ 目录
# 资源文件名包含 content hash，用于缓存优化

自定义配置（vue.config.js）

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
 
module.exports = defineConfig({
  // 部署路径（非根域名时配置）
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
 
  // 输出目录
  outputDir: 'dist',
 
  // 开发服务器配置
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
 
  // 链式配置（精细控制 Webpack）
  chainWebpack(config) {
    config.plugin('html').tap(args => {
      args[0].title = 'My Vue App'
      return args
    })
  },
 
  // CSS 配置
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
 
  // 多页面配置
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
    admin: {
      entry: 'src/admin/main.js',
      template: 'public/admin.html',
      filename: 'admin.html',
    },
  },
})

性能与安全

性能特点

• 冷启动较慢：Webpack 需要在启动时编译整个项目，大型项目首次启动可能耗时 10-30 秒
• HMR 速度随项目规模下降：热更新需要重新构建依赖图，模块数量增多后更新延迟明显
• 构建产物优化完善：生产构建支持代码分割、Tree Shaking、CSS 提取、资源压缩、文件名哈希缓存
• Thread Loader：thread-loader 可将 Babel/TypeScript 编译分配到多进程，加速大型项目构建

安全注意事项

• 依赖安全审计：定期运行 npm audit 检查依赖漏洞，Vue CLI 依赖链较长
• 环境变量泄露风险：仅以 VUE_APP_ 前缀开头的变量会被注入客户端代码，敏感信息不要使用此前缀
• 公共路径配置：publicPath 配置不当可能导致静态资源加载错误或安全策略冲突
• 第三方插件风险：社区插件质量参差不齐，引入前需审查其维护状态和依赖安全
• Webpack DevServer 暴露：开发服务器默认仅监听 localhost，避免在公共网络中暴露 --host 0.0.0.0

技术对比

最佳实践

新项目建议

• 直接使用 create-vue + Vite，不要选择 Vue CLI
• 运行 npm create vue@latest 即可基于 Vite 创建现代 Vue 项目

迁移到 create-vue / Vite

1. 评估迁移成本：盘点 vue.config.js 自定义项、Webpack 专属 loader/plugin 使用情况
2. 创建 Vite 版本项目骨架：使用 npm create vue@latest 创建对照项目
3. 迁移构建配置：将 vue.config.js 中的关键配置转换为 vite.config.js 格式
4. 替换环境变量：VUE_APP_* 前缀改为 VITE_* 前缀，代码中 process.env.VUE_APP_* 改为 import.meta.env.VITE_*
5. 处理 HTML 入口：public/index.html 移至项目根目录，添加 <script type="module" src="/src/main.js">
6. 迁移 Webpack 专属特性：如 require.context 需改为 Vite 的 import.meta.glob
7. 逐步替换，并行验证：保持旧项目可运行，逐步切换功能并回归测试

维护存量项目的实践

• 锁定依赖版本，避免因 npm 缓存或 Node 版本升级引发意外问题
• 将 Node.js 版本固定在 LTS（16.x 或 18.x），使用 .nvmrc 明确声明
• 定期运行 npm audit fix 修复已知安全漏洞
• 对于 Vue 2 项目，考虑使用 @vue/compat 逐步迁移到 Vue 3，并同步迁移到 Vite

技术局限与边界

已知限制

• 开发启动速度慢：Webpack 的冷启动模式决定了大型项目的开发体验瓶颈
• HMR 延迟：基于模块重新编译的 HMR 机制，在模块数量增多后延迟显著
• Webpack 5 兼容性：Vue CLI 5.0 支持 Webpack 5，但部分社区插件尚未完全适配
• Node.js 版本约束：Vue CLI 5.x 要求 Node.js 12+，但部分旧版依赖可能不兼容 Node.js 18+
• 无原生 ESM 开发模式：不像 Vite 可以利用浏览器原生 ES Module，Vue CLI 始终走 Webpack 编译链路

维护模式说明

• 2022 年 2 月，Vue CLI 5.0 发布时官方宣布进入维护模式
• 维护模式下不再开发新功能，仅接受关键性 bug 修复和安全补丁
• 官方文档首页已标注维护模式警告，推荐新项目使用 create-vue

官方推荐替代方案

• 新项目：使用 npm create vue@latest（即 create-vue），底层基于 Vite
• 需要 SSR/SSG：使用 Nuxt 3（基于 Vite + Nitro）
• 文档站点：使用 VitePress（VuePress 的 Vite 版本）
• 组件库开发：使用 Vite + vite-plugin-dts

学习资源

• 官方文档：https://cli.vuejs.org/guide/（标注维护模式）
• Vue CLI 配置参考：https://cli.vuejs.org/config/
• Vue CLI 插件开发指南：https://cli.vuejs.org/dev-guide/plugin-dev.html
• GitHub 仓库：https://github.com/vuejs/vue-cli
• 迁移指南（Vue School）：How to Migrate from Vue CLI to Vite
• create-vue 文档：https://github.com/vuejs/create-vue
• Vite 官方文档：https://vitejs.dev/
• Vue 3 迁移指南：https://v3-migration.vuejs.org/

2026 年现状

截至 2026 年，Vue CLI 已处于维护模式超过四年。其核心依赖 Webpack 在前端框架领域逐渐被 Vite 取代，Vue 生态的官方工具链全面转向 Vite：

• Vue 官方脚手架：create-vue（基于 Vite）是唯一推荐的项目创建方式
• Nuxt 3：完全基于 Vite + Nitro，不再使用 Webpack
• VitePress：作为 VuePress 的继任者，原生基于 Vite
• 社区生态：主流 Vue 库和工具已优先支持 Vite，Webpack 相关的 Vue 插件更新频率显著降低

对于仍在运行 Vue CLI 项目的团队，建议制定渐进式迁移计划，优先将新项目切换到 create-vue + Vite，存量项目在功能迭代中逐步评估迁移可行性。Vue CLI 作为 Vue 生态发展历程中的重要里程碑，其 Webpack 封装理念和插件化架构为后续工具（包括 Vite）的设计提供了宝贵经验。