# vue-cli-up

**Repository Path**: qinkunwei/vue-cli-up

## Basic Information

- **Project Name**: vue-cli-up
- **Description**: 构建工具整体升级，例如：
webpack 3 → 4/5
webpack-dev-server 2 → 3/4
相关 loader、plugin 一并调整
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-07-06
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vuemode

基于 Vue 2 + Vue Router + Vuex + Element UI，使用 Webpack 5 构建。

## 环境要求

- Node.js >= 18.0.0
- npm >= 8.0.0

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（默认 http://localhost:8080）
npm run dev

# 生产环境打包，输出到 dist/
npm run build

# 打包并生成体积分析报告
npm run build --report
```

## 技术栈

| 类别 | 说明 |
|------|------|
| 框架 | Vue 2.7、Vue Router 3、Vuex 3 |
| UI | Element UI 2 |
| 请求 | Axios |
| 样式 | Less、PostCSS |
| 构建 | Webpack 5、Babel 7、webpack-dev-server 4 |

## 升级内容概览

项目由旧版 Vue CLI Webpack 3 模板升级至 Webpack 5，以兼容 Node 18+ / 22+ / 25+ 等新版本 Node.js，解决 `http_parser` 等兼容性问题。

| 组件 | 旧版本 | 新版本 |
|------|--------|--------|
| webpack | 3.6 | **5.89** |
| webpack-dev-server | 2.11 | **4.15** |
| vue-loader | 13 | **15** |
| vue | 2.5 | **2.7.16** |
| babel | babel 6 | **@babel 7** |
| CSS 提取 | extract-text-webpack-plugin | **mini-css-extract-plugin** |
| JS 压缩 | uglifyjs-webpack-plugin | **terser-webpack-plugin** |
| CSS 压缩 | optimize-css-assets-webpack-plugin | **css-minimizer-webpack-plugin** |
| 代码分割 | CommonsChunkPlugin | **optimization.splitChunks** |
| 错误提示插件 | friendly-errors-webpack-plugin | **@soda/friendly-errors-webpack-plugin** |

## 主要改动文件

### 构建工具升级

| 文件 | 改动说明 |
|------|----------|
| `package.json` | 升级依赖版本，启动脚本改为 `webpack serve` |
| `.babelrc` | 迁移至 Babel 7（`@babel/preset-env`） |
| `postcss.config.js` | 新增 PostCSS 配置 |
| `build/webpack.base.conf.js` | 接入 `VueLoaderPlugin`、asset modules、Node polyfill 调整 |
| `build/webpack.dev.conf.js` | 适配 devServer 4.x、`CopyWebpackPlugin` 新 API |
| `build/webpack.prod.conf.js` | 使用 `splitChunks`、`MiniCssExtractPlugin`、`TerserPlugin` |
| `build/utils.js` | CSS 提取逻辑改为 `mini-css-extract-plugin` |
| `config/dev.env.js` | `webpack-merge` v5 语法（`{ merge }`） |
| `config/index.js` | devtool 名称更新、开发代理配置 |

### 接口与请求优化

| 文件 | 改动说明 |
|------|----------|
| `src/config/env.js` | 开发环境 `baseUrl` 改为 `/api/`，走本地代理 |
| `src/utils/request.js` | 完善网络错误统一提示 |
| `src/views/home/home.vue` | 修复 `.catch` 中 `this` 丢失导致 `$message` 报错 |

## 目录结构

```
vue-cli/
├── build/              # Webpack 构建配置
├── config/             # 项目环境配置（端口、代理、打包路径等）
├── src/
│   ├── api/            # 接口定义
│   ├── components/     # 公共组件
│   ├── config/         # 接口域名、请求方式等
│   ├── router/         # 路由
│   ├── store/          # Vuex 状态
│   ├── utils/          # 工具（含 axios 封装 request.js）
│   └── views/          # 页面
├── static/             # 静态资源（不参与 webpack 打包）
└── dist/               # 打包输出目录
```

## 接口与代理

开发环境下，前端请求统一走 `/api/` 前缀，由 devServer 代理到后端，避免浏览器跨域问题。

| 配置项 | 文件 | 说明 |
|--------|------|------|
| 接口基础地址 | `src/config/env.js` | 开发环境为 `/api/`，生产环境为完整域名 |
| 代理规则 | `config/index.js` → `dev.proxyTable` | 将 `/api` 转发至后端服务器 |
| 请求封装 | `src/utils/request.js` | 统一处理 token、错误提示等 |
| 接口方法 | `src/api/` | 按模块定义具体接口 |

修改后端地址时：

1. 开发环境：改 `config/index.js` 中 `proxyTable['/api'].target`
2. 生产环境：改 `src/config/env.js` 中 `production` 的 `baseUrl`

> 修改代理配置后需重启 `npm run dev` 才能生效。

## 常用配置

| 需求 | 配置文件 |
|------|----------|
| 开发端口 / 是否自动打开浏览器 | `config/index.js` → `dev.port`、`dev.autoOpenBrowser` |
| 打包输出路径、publicPath | `config/index.js` → `build` |
| 路由白名单（免登录页面） | `src/permission.js` |
| Token 字段名、默认请求方式 | `src/config/env.js` → `def` |

## 路由说明

| 路径 | 页面 |
|------|------|
| `/` | 首页（HelloWorld） |
| `/home` | 示例页（axios、vuex、Element UI 演示） |
| `/index` | index 页面 |
| `/404` | 404 页面 |

## 注意事项

1. **Node 版本**：本项目已升级至 Webpack 5，需使用 Node 18 及以上版本；不再兼容旧版 Webpack 3 / webpack-dev-server 2。
2. **生产部署**：`dist/` 需部署到 Web 服务器（Nginx 等），不能直接双击打开 `index.html`。
3. **HTTPS 证书**：若后端域名证书异常，开发代理已设置 `secure: false`；生产环境建议由后端修复证书配置。
4. **依赖安全**：当前 axios 版本较旧，后续可按需升级并回归测试接口调用。

## 参考文档

- [Vue 2 文档](https://v2.cn.vuejs.org/)
- [Element UI 文档](https://element.eleme.cn/)
- [Webpack 5 文档](https://webpack.js.org/)