Vue 2项目创建时，vue-cli 2与3版本脚手架有何关键区别？

Question

**常见技术问题：** 在创建 Vue 2 项目时，误用 vue-cli 3+（即 `@vue/cli`）默认生成 Vue 3 项目，导致 `Vue.extend`、`beforeDestroy` 等 Vue 2 特有 API 不可用或警告频发；而 vue-cli 2（`vue-cli`）基于 webpack 3 + vue-loader 13，内置 `build/` 和 `config/` 目录，支持直接修改 webpack 配置；vue-cli 3+ 则采用插件化架构（`vue.config.js` 替代完整配置目录）、默认使用 webpack 4+ 和 `@vue/cli-service`，且对 Vue 2 项目需显式指定 `--default` 或选择「Manually select features」并勾选「Vue Version: 2.x」。此外，cli 3+ 的 `vue create` 命令不兼容 cli 2 的 `vue init` 模板语法（如 `vue init webpack my-project` 已废弃）。开发者常因未注意 CLI 版本差异，导致脚手架选型错误、依赖冲突或升级路径混乱。

Answer 1

```html

一、现象层：典型错误行为与即时症状

• 执行 vue create my-app 后，项目中无法调用 Vue.extend()，控制台报错 "Vue.extend is not a function"；
• 生命周期钩子 beforeDestroy 触发时无响应，或被 Vue 3 的 beforeUnmount 替代警告覆盖；
• 使用 vue init webpack my-project 报错 "Command 'init' not found" —— CLI 3+ 已彻底移除该子命令；
• node_modules/@vue/cli-service 版本为 ^5.0.0，但 package.json 中却声明 "vue": "^2.6.14"，形成隐性版本撕裂；
• 开发者尝试在 vue.config.js 中配置 configureWebpack: { resolve: { alias: { vue$: 'vue/dist/vue.esm.js' } } }，仍无法恢复 Vue 2 的 Options API 完整行为。

二、结构层：CLI 架构演进对比分析

维度	vue-cli 2（vue-cli）	vue-cli 3+（@vue/cli）
核心包名	vue-cli（全局安装）	@vue/cli（全局安装）
项目初始化命令	vue init webpack my-app	vue create my-app（--default 默认 Vue 3）
Vue 版本控制粒度	模板级硬编码（如 webpack 模板固定 Vue 2）	交互式特征选择 → 必须手动勾选「Vue Version: 2.x」
Webpack 配置方式	显式 build/webpack.base.conf.js 等完整目录树	抽象为 vue.config.js + 插件链（@vue/cli-plugin-babel 等）

三、机制层：为何 Vue 2 项目在 CLI 3+ 下“看似能跑实则脆弱”？

根本原因在于 @vue/cli-service 的运行时解析逻辑：

1. CLI 3+ 通过 pkg.vue 字段或 vueVersion 配置识别目标 Vue 版本；
2. 若未显式指定，其内部 resolveVueVersion() 函数默认返回 '3'；
3. 进而加载 @vue/compiler-sfc@3.x 解析单文件组件，导致 <script> 块中 export default { beforeDestroy() {} } 被编译为 Vue 3 兼容语法，但 runtime 仍为 Vue 2 时触发校验警告；
4. Vue.extend 在 Vue 3 中被标记为 deprecated 并从 ESM 入口移除，仅保留在 vue/dist/vue.esm-bundler.js 的兼容分支中 —— 但 CLI 3+ 的默认 vue 别名指向的是无兼容层的 vue.runtime.esm-bundler.js。

四、决策层：面向生产环境的选型策略矩阵

graph TD A[新建 Vue 2 项目？] -->|是| B{是否需长期维护/团队协作？} B -->|是| C[✅ 选用 CLI 3+ + 显式 Vue 2 模式
• 执行 vue create my-app
• 手动选择「Manually select features」→ 勾选「Vue Version: 2.x」
• 后续可通过 vue upgrade --version 2 升级 CLI 插件] B -->|否| D[⚠️ 可接受 CLI 2，但仅限 PoC 或遗留系统快速验证
• npm install -g vue-cli
• vue init webpack-simple my-app
• 注意：webpack 3 生态已停止安全更新] A -->|否| E[新项目直接采用 Vue 3 + Composition API + Vite]

五、实施层：三步精准修复误建的“伪 Vue 2”项目

1. 验证当前 Vue 运行时版本：
   console.log(Vue.version) — 若输出 "3.4.21"，说明项目实际运行于 Vue 3；
2. 强制降级并锁定 Vue 2 生态：
   

   npm uninstall @vue/cli-service
   npm install -D @vue/cli-service@4.5.15
   npm install vue@2.7.16 vue-template-compiler@2.7.16

3. 重写入口别名与编译器匹配：
   在 vue.config.js 中添加：
   

   module.exports = {
     configureWebpack: {
       resolve: {
         alias: {
           vue$: 'vue/dist/vue.esm.js'
         }
       }
     },
     chainWebpack: config => {
       config.plugin('define').tap(args => {
         args[0].__VUE_OPTIONS_API__ = true;
         args[0].__VUE_PROD_DEVTOOLS__ = false;
         return args;
       });
     }
   }

```