摘要： pathRewrite是Vue CLI代理配置中的关键选项，用于修改请求路径以实现前后端路径解耦。主要机制包括移除/替换前缀（如将/api/users转为/users）、支持正则匹配（如^/api/(.*)捕获动态路径）和多级路径映射。配置时需注意正则匹配规则和顺序优先级，常与changeOrigin配合使用。典型应用场景包括统一API前缀管理、适配后端路由差异等，通过灵

1. 什么是 pathRewrite？​​

pathRewrite 是 Vue CLI devServer.proxy 配置中的一个选项，用于​​重写（修改）代理请求的路径​​。它的主要作用是：

• ​​移除或替换请求路径中的特定前缀​​（如 /api）。
• ​​自定义路径映射规则​​，使前端请求和后端接口路径解耦。

---

​​2. 为什么需要 pathRewrite？​​

​​典型场景​​

假设：

• ​​前端请求路径​​：/api/users
• ​​后端实际接口路径​​：/users（没有 /api 前缀）

如果直接代理：

proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
}
}

请求会被转发到 http://localhost:8000/api/users，但后端可能期望 /users。
这时就需要 pathRewrite 移除 /api 前缀。

---

​​3. pathRewrite 的配置语法​

pathRewrite: {
'^匹配的正则表达式': '替换后的字符串'
}

• 键（Key）​​：正则表达式，匹配请求路径。
• ​​值（Value）​​：替换后的字符串（可空）。

---

​​4. 常见用法示例​​

​​(1) 移除前缀（最常用）​

proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
pathRewrite: {
'^/api': '', // 移除 `/api` 前缀
},
},
}

• ​​前端请求​​：/api/users
• ​​实际代理请求​​：http://localhost:8000/users

​​(2) 替换前缀​

pathRewrite: {
'^/api': '/backend', // 将 `/api` 替换为 `/backend`
}

• ​​前端请求​​：/api/users
• ​​实际代理请求​​：http://localhost:8000/backend/users

​​(3) 多路径重写​

pathRewrite: {
'^/api/v1': '/v1', // /api/v1/users → /v1/users
'^/api/v2': '/v2', // /api/v2/users → /v2/users
}

​​5. 高级用法​​

​​(1) 正则表达式匹配

pathRewrite: {
'^/api/(.*)': '/$1', // /api/users/1 → /users/1
}

• (.*) 捕获任意字符，$1 引用捕获的内容。

​​(2) 条件性重写​

pathRewrite: (path, req) => {
if (path.startsWith('/api/admin')) {
return path.replace('/api/admin', '/admin');
}
return path.replace('/api', '');
}

注意事项​​

1. ​​正则表达式必须匹配​​

   • 如果 pathRewrite 不匹配，路径不会被修改。
   • 示例：'^/api' 能匹配 /api/users，但不能匹配 /users。

2. ​​顺序敏感

   pathRewrite: {
   '^/api': '/v1',
   '^/api/v2': '/v2', // 这条规则永远不会生效！
   }

   解决方案​​：调整顺序，先匹配更具体的路径：

3. pathRewrite: {
   '^/api/v2': '/v2',
   '^/api': '/v1',
   }

   ​​与 changeOrigin 配合使用

4. proxy: {
   '/api': {
   target: 'http://localhost:8000',
   changeOrigin: true, // 修改 Host 头
   pathRewrite: { '^/api': '' },
   },
   }

   7. 完整示例​

   // vue.config.js
   module.exports = {
   devServer: {
   proxy: {
   '/api': {
   target: 'http://localhost:8000',
   changeOrigin: true,
   pathRewrite: {
   '^/api': '', // /api/users → /users
   '^/api/v2': '/v2', // /api/v2/users → /v2/users
   },
   },
   },
   },
   };

   8. 总结

5. ​​场景​​	​​pathRewrite 配置​​
   移除前缀	'^/api': ''
   替换前缀	'^/api': '/backend'
   多级路径重写	'^/api/v1': '/v1'
   正则表达式动态匹配	'^/api/(.*)': '/$1'

   通过灵活使用 pathRewrite，你可以轻松实现前后端路径的解耦，让代理配置更清晰！ ?