Vue 代理的核心作用，一句话说清：解决 "跨域请求" 问题。
比如你的 Vue 项目跑在 http://localhost:8080（前端地址），想请求后端接口 http://localhost:3000/api/data（后端地址），因为 "端口不同"，浏览器会拦截这个请求（这就是 "跨域"）。而 Vue 代理能帮你 "伪装" 请求 ------ 让前端看起来是在请求自己（8080 端口），实际由代理偷偷转发到后端（3000 端口），避开浏览器的跨域拦截。
一、核心原理：3 步走
- **前端发请求：**不直接发 http://localhost:3000/api/data，而是发 http://localhost:8080/api/data（请求自己的端口）；
- **代理拦截转发：**Vue 代理识别到请求路径里有 /api（可自定义），就把请求偷偷转发给后端地址 http://localhost:3000；
- **后端响应回传：**后端把数据返回给代理，代理再把数据交给前端 ------ 整个过程浏览器以为在和 "自己人"（8080）通信，不拦截。
二、两种配置场景
Vue 代理配置在项目根目录的 vue.config.js 文件里（没有就新建一个），核心是 devServer.proxy 选项，分 "简单场景" 和 "复杂场景"。
场景 1：单代理（只对接一个后端）
如果前端只请求一个后端地址，用简单配置即可。
javascript
// vue.config.js
module.exports = {
devServer: {
proxy: 'http://localhost:3000', // 后端真实地址（要转发到的地址）
}
}
}
}前端怎么发请求？
比如用 axios，直接请求 /api/data（不用写全后端地址）：
javascript
// 组件里的请求代码
import axios from 'axios'
axios.get('/data') // 实际会被代理转发到 http://localhost:3000/data
.then(res => {
console.log('后端返回的数据：', res.data)
})
.catch(err => {
console.log('请求出错：', err)
})场景 2：多代理（对接多个后端）
如果需要请求两个不同的后端（比如一个是 3000 端口的用户接口，一个是 4000 端口的商品接口），可以配置多个匹配规则。
javascript
// vue.config.js
module.exports = {
devServer: {
proxy: {
// 1. 第一个代理：匹配 "/api/user" 开头的请求，转发到 3000 端口（用户后端）
'/api/user': {
target: 'http://localhost:3000', // 2. 后端真实地址（要转发到的地址）
ws: true, // 3. 支持WebSocket（可选，比如实时通信需要，默认为true）
changeOrigin: true, // 4. 关键：让后端以为请求是从代理发的（伪装请求源，默认为true）
pathRewrite: {
// 5. 路径重写：比如前端发 "/api/user/data"，实际转发给后端 "/data"
// （如果后端接口本身就带 "/api/user"，这行可以删掉）
'^/api/user': '/user'
}
},
// 第二个代理：匹配 "/api/goods" 开头的请求，转发到 4000 端口（商品后端）
'/api/goods': {
target: 'http://localhost:4000',
changeOrigin: true,
pathRewrite: { '^/api/goods': '/goods' } // 转发后变http://localhost:4000/goods/xxx
}
}
}
}前端怎么发请求？
按不同接口路径发，代理会自动转发到对应后端：
javascript
// 请求用户数据（走3000端口）
axios.get('/api/user/info') // 转发到 http://localhost:3000/user/info
// 请求商品数据（走4000端口）
axios.get('/api/goods/list') // 转发到 http://localhost:4000/goods/list三、注意
- **配置后要重启项目：**改了 vue.config.js 后，必须重启 Vue 项目（npm run serve），代理配置才会生效；
- **changeOrigin: true 必加：**如果不加，后端会识别到请求源是 8080（前端端口），可能会拒绝跨域；
- **pathRewrite 按需用：**如果后端接口本身就带 /api（比如后端地址是 http://localhost:3000/api/data），就不用写 pathRewrite；如果后端接口没有 /api，就需要用它把 /api 去掉；
- **只在开发环境生效：**Vue 代理是 devServer 里的配置，只能在开发时（npm run serve）用；项目打包上线后（npm run build），需要靠后端配置跨域（比如 Nginx 转发），前端代理就没用了。
四、一句话总结
Vue 代理就像 "前端和后端之间的快递员"：前端把包裹（请求）交给快递员（代理），快递员帮你送到后端，再把后端的回信（响应）带给前端，避开了浏览器这个 "保安" 的拦截。