### Vue CLI 中 config 目录下的 index.js 文件详解
#### 一、概述
在 Vue CLI 构建项目的过程中，`config` 目录下的 `index.js` 文件扮演着至关重要的角色。它主要用于定义项目的构建配置，包括开发环境与生产环境的各种设置。通过对该文件的理解与配置，开发者可以更灵活地控制项目的构建流程，从而提高开发效率。
#### 二、核心知识点解析
##### 1. 文件结构与功能
- **文件位置**：`config/index.js` 是整个项目构建的核心配置文件之一，通常位于项目根目录下的 `config` 文件夹内。
- **基本功能**：此文件主要包含两个主要对象——`build` 和 `dev`，分别对应生产环境和开发环境的配置信息。
##### 2. 生产环境配置 (`build`)
- **环境配置**：通过 `env` 属性引用 `./prod.env` 文件，用于指定当前环境变量，例如 `NODE_ENV` 的值。
- **示例代码**：
```javascript
env: require('./prod.env'),
```
- **输出文件路径**：使用 `path.resolve()` 方法来获取绝对路径。
- **示例代码**：
```javascript
index: path.resolve(__dirname, '../dist/index.html'),
```
- **含义**：指定 HTML 文件的输出路径为 `dist/index.html`。
- **静态资源路径配置**：
- **静态资源根目录**：`assetsRoot` 定义了静态资源的根目录，即 `dist`。
- **示例代码**：
```javascript
assetsRoot: path.resolve(__dirname, '../dist'),
```
- **静态资源子目录**：`assetsSubDirectory` 指定静态资源的子目录，通常是 `static`。
- **示例代码**：
```javascript
assetsSubDirectory: 'static',
```
- **公共路径**：`assetsPublicPath` 设置了静态资源的公共路径，用于 CDN 或其他外部访问。
- **示例代码**：
```javascript
assetsPublicPath: 'https://cdn.XXXX.cn/siteResource/pop-online-fund-vote-web/',
```
- **源码映射配置**：`productionSourceMap` 控制是否在生产环境中生成 source map 文件。
- **示例代码**：
```javascript
productionSourceMap: true,
```
- **含义**：默认开启，便于调试编译后的文件。
- **代码压缩配置**：
- **是否压缩**：`productionGzip` 控制是否启用 Gzip 压缩。
- **示例代码**：
```javascript
productionGzip: false,
```
- **注意事项**：默认关闭，如需开启需安装 `compression-webpack-plugin` 插件。
- **压缩文件类型**：`productionGzipExtensions` 定义了要被压缩的文件类型。
- **示例代码**：
```javascript
productionGzipExtensions: ['js', 'css'],
```
- **构建分析报告**：`bundleAnalyzerReport` 控制构建完成后是否显示构建分析报告。
- **示例代码**：
```javascript
bundleAnalyzerReport: process.env.npm_config_report,
```
- **含义**：可以通过设置 `npm_config_report` 环境变量来控制报告的显示。
##### 3. 开发环境配置 (`dev`)
- **环境配置**：通过 `env` 属性引用 `./dev.env` 文件，用于指定开发环境变量。
- **示例代码**：
```javascript
env: require('./dev.env'),
```
- **服务器端口**：`port` 定义了开发服务器运行的端口。
- **示例代码**：
```javascript
port: 443,
```
- **自动打开浏览器**：`autoOpenBrowser` 控制启动开发服务器时是否自动打开浏览器。
- **示例代码**：
```javascript
autoOpenBrowser: true,
```
- **代理配置**：`proxyTable` 用于设置开发环境下的 API 请求代理规则。
- **示例代码**：
```javascript
proxyTable: {
'/api': {
target: 'http://localhost:8082',
pathRewrite: {
'^/api': '/'
}
},
'/pop-shared-web-components': {
target: 'http://pop-shared-web-components.cn:3000',
pathRewrite: {
'^/pop-shared-web-components': '/'
}
}
},
```
- **含义**：将 `/api` 和 `/pop-shared-web-components` 请求代理到相应的服务器地址，方便本地开发时模拟后端接口。
- **CSS Source Map**：默认关闭，因为相对路径可能会导致问题。
- **示例代码**：
```javascript
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemap)
```
#### 三、总结
`config/index.js` 文件是 Vue CLI 项目中非常重要的配置文件之一，它不仅控制着项目的构建流程，还能够根据不同的环境进行差异化配置。通过深入理解并合理配置这些选项，可以帮助开发者更好地管理项目，提升开发体验。
