pathRewrite 是 Vue 代理配置中用于重写请求路径的选项，它的核心作用是 “在代理转发请求前，对请求路径进行自定义修改” 。以下是它的详细作用和使用场景：
1. 解决路径匹配不一致问题
当你的前端请求路径和后端接口路径前缀不同时，可以通过 pathRewrite 动态修改路径。例如：
场景示例
- 前端请求路径：
/api/user/list - 后端真实路径：
/user/list（没有/api前缀）
此时需要去掉 /api 前缀，配置如下：
javascript
复制
下载
devServer: {
proxy: {
'/api': {
target: 'http://backend-server.com',
changeOrigin: true,
pathRewrite: {
'^/api': '', // 将路径中的 "/api" 替换为空字符串
},
},
},
},
效果：
前端请求 /api/user/list → 代理转发为 http://backend-server.com/user/list。
2. 添加路径前缀
如果后端接口需要统一前缀，但前端请求路径中没有，可以用 pathRewrite 添加：
场景示例
- 前端请求路径：
/user/list - 后端真实路径：
/api/v1/user/list
配置：
javascript
复制
下载
pathRewrite: {
'^/user': '/api/v1/user', // 添加前缀
},
效果：
前端请求 /user/list → 代理转发为 http://backend-server.com/api/v1/user/list。
3. 复杂路径映射
支持正则表达式，实现更灵活的路径替换：
场景示例
- 前端请求路径：
/service/user/123 - 后端真实路径：
/api/user?id=123
配置：
javascript
复制
下载
pathRewrite: {
'^/service/user/(\d+)': '/api/user?id=$1', // 将路径参数转换为查询参数
},
效果：
前端请求 /service/user/123 → 代理转发为 http://backend-server.com/api/user?id=123。
4. 注意事项
-
正则表达式语法：
pathRewrite的键值对使用正则表达式匹配路径（如^/api匹配以/api开头的路径）。 -
仅修改请求路径：
它只影响发送到后端服务器的路径，不会修改浏览器中看到的请求 URL。 -
与
proxy的路径前缀配合：javascript
复制
下载
proxy: { '/api': { // 这里的前缀需要与 pathRewrite 的匹配规则一致 target: 'http://backend.com', pathRewrite: { '^/api': '/v2' }, }, }, -
调试技巧：
如果代理未生效，可以在pathRewrite中添加console.log（需重启服务）：javascript
复制
下载
pathRewrite: { '^/api': function (path, req) { console.log('Original path:', path, 'Rewritten path:', path.replace('^/api', '')); return path.replace('^/api', ''); } },
常见问题解决
Q1：配置了 pathRewrite，但请求仍返回 404？
- 检查正则表达式是否匹配路径，例如
^/api是否能匹配到/api/user。 - 检查目标服务器路径是否存在（如
http://backend.com/user/list是否真实存在）。
Q2：是否需要保留原始路径？
- 如果前后端路径完全一致，可以不使用
pathRewrite，直接转发原始路径。
Q3：如何保留部分路径？
javascript
复制
下载
pathRewrite: {
'^/api/v1': '/v2', // 将 /api/v1/user → /v2/user
},
总结
pathRewrite 的本质是一个路径转换器，它允许你：
- 删除多余前缀（如开发时的
/api占位符） - 添加必要前缀（适配后端路径格式）
- 实现动态路径映射（处理参数、RESTful 路由等）
合理使用它可以让代理配置更灵活，彻底解决前后端路径不一致的问题。
