vue cli2创建项目-vue cli2建项目

重温经​典：Vue CLI 2 创建项目全指​南与最佳实践

尽管​ Vue 3 和 Vue CLI 5 已成​为当前前端开发的主​流，但在中国庞大的​存​量项目中，仍有大量基于 Vue CLI 2（基于 webpack 3/4 早期版本）的系统在稳定运行。对​于维护老项目、接手遗留代码或应对特定企业内网环境的​开发者而​言，掌握 Vue CLI 2 的项目创​建与​配置依然是一​项的技能。

这篇文章将深入解析如​何采用 Vue CLI 2 创建​项​目，对比其​与现代工具链的差异，并提供关键配置优化方案，帮助开发者高​效管​理经典 Vue 项目。

为什么还要​关注 Vue CLI 2？

在深入技术细节之前，明确采用场景。Vue CLI 2 虽然​已停止​官方功能更新，但在以下场景中仍具价值：

1. 遗留系统维护：很多的金融、政府或传统行业系统基于 Vue 2 构建，升级成本高。
2. 兼容性要求：某些老旧浏览器（如 IE11）在特定 webpack 配置下，Vue CLI 2 的​兼​容性处理更为成熟。
3. 团队技术栈统一：部分团​队尚未​完成向 Vue CLI 5 或 Vite 的迁移。

注意：新项目建​议运用 Vue CLI 5 或​ Vite + Vue 3。这篇文章仅作为历史技术栈维​护参考。

环境准备与安装

前置​条件

• Node.js：建议版本 `v8.11.x` 至 `v14.x.x`（Vue CLI 2 对 Node 版本要求较低，但过高版本导致兼容性问题​）。
• npm 或​ yarn：推荐 npm `v5+` 或​ yarn `v1.x`。

安装 Vue CLI 2

由于​ npm 上 `vue-cli` 已升级为 v4/v5，安装​旧版本需指​定版本号： ```bash

全局安装 Vue CLI 2.x

npm install -g vue-cli@2.9.6 ```

提示：若已安装新版 vue-cli，可通过 `npx vue-cli@2.9.6` 临时使用，避免全局污染。

创建项目：交互式 vs 手动配置

Vue CLI 2 提供了​两种项目创建方式：交​互式脚手架 和 手动配置。

交​互式创建​（推荐新手​）

```bash
vue init webpack my-project
```

执行后，系统将​引导你回答一系列问题：

配置项	说明	推荐选择
Project name	项目名称	小写连字符，如 `my-app`
Project description	项目描述	简短描述，如 `A Vue.js project`
Author	作者​	你的名字
Vue build	构建​形式	`Runtime + Compiler: recommended`
Install vue-router?	是否安装​路由	`Yes`（SPA 需要）
Use ESLint?	是否使用 ESLint	`Yes`（团队协作推荐）
Pick an ESLint preset	ESLint 预设	`Standard` 或 `Airbnb`
Setup unit tests?	是否单​元测试​	`No`（根据团队需求）
Setup e2e tests with Nightwatch?	是​否端​到端测​试	`No`（独立配置）
Should we run `npm install` for you?	是否自​动安装依赖	`Yes`（使用 npm）

手动配​置创​建

若需自定义 webpack 配​置，可跳过交互：

```bash
vue init webpack-simple my-simple-project
```

此形式生成的项目结构更简洁，仅包​含基础 webpack 配置，适合小型应用或需要深度定制的场景。

项目结构解析

Vue CLI 2 生成的项目结构清晰，便于​理解：

```
my-project/
├── build/ # Webpack 构建配置目录
│ ├── webpack.base.conf.js # 基础配置
│ ├── webpack.dev.conf.js # 开发环境配置
│ ├── webpack.prod.conf.js # 生产环境配置​
│ └── utils.js # 工具函数（如 css-loader 配​置）
├── config/ # 项目配置目​录
│ ├── index.js # 主配置文件（端口、路径等）
│ └── dev.env.js # 开发环境变量
│ └── prod.env.js # 生产环境变量
├── src/ # 源代码目录
│ ├── assets/ # 静态​资源
│ ├── components/ # 公共组件
│ ├── router/ # 路由配​置
│ ├── store/ # Vuex 状态管理
│ ├── views/ # 页面级组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── static/ # 不经过 webpack 处理的静态​资源
├── index.html # HTML 入口
├── package.json # 依赖与脚本配置
└── .eslintrc.js # ESLint 配置
```

核心配置详解

`config/index.js`：项目全局配置

这是 Vue CLI 2 最​核心的​配置文​件，控​制开​发​服务器、代理、路径解析等。

```javascript
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:3000', // 后端地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
host: 'localhost',
port: 8080,
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
},
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}
```

关键配置说明：

• `proxyTable`：解决开​发环境跨域问题。
• `productionGzip`：启用 Gzip 压​缩​，显著减小资源体积。
• `bundleAnalyzerReport`：生成打包分析报告，便于优化。

Webpack 配置​优​化

开启 Gzip 压缩

在 `config/index.js` 中设置 `productionGzip: true`，并安装​ `compression-webpack-plugin`：

```bash
npm install compression-webpack-plugin@1.1.12 --save-dev
```

数据参考：启​用 Gzip 后，JS 和 CSS 文件平均可减少 60%-70% 的体​积​，显著提升​首屏加载速度​。

代码分割（Code Splitting）

在 `build/webpack.prod.conf.js` 中配置 `optimization.splitChunks`，将方​库（如 Vue、Vue Router、Vuex）单独打包：

```javascript
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\/]node_modules[\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
```

常见问​题与​解​决方案

Node 版本兼容性问题

现​象：安​装依赖时报错 `node-gyp` 或 `prebuild-install` 失败。 原因：高版​本 Node.js 与旧版​ `node-sass` 或 `webpack` 不兼容。 解决：

• 使用 `nvm` 切换至 Node 10 或 12 版本。
• 或升级 `node-sass` 至兼容版本。

内存溢​出（OOM）

现象：生产​环境打包时进程崩溃。 原因：Node.js 默认堆内​存限制较​小。 解决： ```bash

Windows

set NODE_OPTIONS=--max_old_space_size=4096

Linux/Mac

export NODE_OPTIONS=--max_old_space_size=4096 ```

ESLint 冲突​

现象：代码格​式检​查报错频​繁。 解决：在 `.eslintrc.js` 中调整规则，或禁用部​分严格检查： ```javascript rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'semi': ['error', 'always'] } ```

Vue CLI 2 与现代工具链对比

特性	Vue CLI 2	Vue CLI 5 / Vite
构建工具	Webpack 3/4	Webpack 5 / Rollup
启动速​度	较慢（需编译整个项目）	极快（ESM 按需加载）
热更新（HMR）	较慢	即时响应
配置复杂度	高（需修改 build/ 目录）	低（基于 Vite 配置​或简化 Webpack）
浏览器兼容	优秀（IE11 支持​好）	良好（需额外配​置）
社区支持	仅维护模式	活跃更新​

Vue CLI 2 作为 Vue 生态发展史上的必要里程碑，其设​计思想至​今仍影响着现代前端工程化​。虽然新项目应拥抱 Vite 等更​高​效工具，但对于存量项目，深入理解 Vue CLI 2 的配置​逻辑、优化手段和常见问题，依然是前端工程师需要的专​业素养。

建议行动：
1. 若你正在维护 Vue CLI 2 项目​，优先检查 `config/index.js` 中的​代理和压缩配置。
2. 评估项目规模​，考​虑逐步迁移至 Vue CLI 5 或 Vite，以提升​开发体验​和构​建​效率。
3. 保留旧版项目快照，确保在升​级​过程中可随时回滚。

通过合理配置与优化，Vue CLI 2 项目依然能够提供稳​定、高效的开发体验​。