🎉 Vue CLI3 与 vue.config.js 的配置详解 🛠️

在使用 Vue CLI3 构建项目时，`vue.config.js` 是一个非常重要的配置文件。它位于项目的根目录下，默认情况下可能并不存在，但你可以手动创建它来实现对项目的个性化设置。通过这个文件，开发者可以轻松调整 Webpack 的配置、设置代理、优化构建过程等。

首先，让我们谈谈基本配置。在 `vue.config.js` 中，最常用的配置是 `publicPath` 和 `outputDir`。前者用于指定应用的部署路径（如 `/static/`），后者则定义了打包后文件存放的位置。例如：

```javascript

module.exports = {

publicPath: '/my-app/',

outputDir: 'dist'

};

```

其次，如果你需要处理跨域问题，可以通过 `devServer.proxy` 设置代理服务器。比如：

```javascript

devServer: {

proxy: 'https://api.example.com'

}

```

这样可以有效解决开发环境下的 API 请求问题。

此外，还可以利用 `configureWebpack` 或 `chainWebpack` 进行更高级的自定义。例如，通过 `chainWebpack` 修改 Webpack 的默认规则：

```javascript

chainWebpack(config) {

config.module

.rule('images')

.test(/\.(png|jpe?g|gif)$/i)

.use('image-webpack-loader')

.loader('image-webpack-loader')

.options({ mozjpeg: { progressive: true } });

}

```

通过这些配置，你的 Vue 项目将更加灵活和高效！✨