什么是vue.config.js？
vue.config.js是Vue框架中的一个配置文件，用于配置项目的各种属性和行为。它被放置在项目根目录下，可以修改和定制化各种构建和开发环境的属性，以满足不同项目的需求。
为什么要配置proxy？
在开发过程中，我们常常需要与后端服务器进行通信。然而，由于前端和后端的端口地址不同，会引发跨域问题，导致请求被拒绝。为了解决这个问题，我们可以使用proxy配置来代理请求，将前端请求发送到后端对应的地址上，从而绕过跨域限制。
如何配置proxy？
在vue.config.js中，我们可以通过添加一个devServer对象来配置proxy。例如，我们想将所有以/api开头的请求转发到http://backend-server.com，可以这样配置：
```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://backend-server.com', changeOrigin: true } } } } ```上述配置中，'/api'表示匹配所有以/api开头的请求，target指定了转发的目标地址，并设置changeOrigin为true表示启用跨域。
配置多个proxy
有时候，我们可能需要配置多个proxy以满足项目的不同需求。在vue.config.js中，我们可以通过在proxy对象中添加多个属性来配置多个proxy。例如：
```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://backend-server.com', changeOrigin: true }, '/images': { target: 'http://image-server.com', changeOrigin: true } } } } ```上述配置中，我们除了将以/api开头的请求转发到http://backend-server.com外，还将以/images开头的请求转发到http://image-server.com。
配置proxy的其他选项
除了target和changeOrigin之外，proxy还支持其他一些配置选项，如：
-
pathRewrite：用于重写URL，可以动态修改请求的路径。例如：
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://backend-server.com',
pathRewrite: {
'^/api': '/v1'
}
}
}
}
}
```
上述配置会将/api/user请求转发到http://backend-server.com/v1/user。
-
bypass：用于定义一个自定义函数来绕过代理。该函数接收req参数，表示请求的原始node.js请求。例如：
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://backend-server.com',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
}
```
上述配置将跳过代理，直接将请求转发到index.html页面。
-
headers：用于添加自定义请求头信息。例如：
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://backend-server.com',
headers: {
'X-Forwarded-For': 'http://frontend-server.com'
}
}
}
}
}
```
上述配置将在请求中添加一个自定义的X-Forwarded-For头信息。
总结
通过在vue.config.js中配置proxy，我们可以解决前端开发过程中的跨域问题。配置非常灵活，可以根据项目的需求进行定制化设置，满足不同的开发需求。
