​​深入解析 Vue 中的 pathRewrite：路径重写规则详解​​

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，你可以轻松实现前后端路径的解耦，让代理配置更清晰！ 🚀