vue代理实现
Vue 代理实现方法
在 Vue 项目中，代理常用于解决跨域问题或本地开发时转发 API 请求。以下是几种常见的代理实现方式：
开发环境代理（vue.config.js）
在 vue.config.js 中配置 devServer.proxy，适用于本地开发环境：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://your-backend-server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}生产环境代理（Nginx）
生产环境通常通过 Nginx 配置反向代理：
server {
listen 80;
server_name your-domain.com;
location /api/ {
proxy_pass http://your-backend-server.com/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}前端代码层代理（axios 拦截器）
通过 axios 拦截器实现请求路径转换：
const service = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? '/api' : 'https://prod-api.com'
})环境变量配置
结合环境变量管理不同环境的代理配置：
# .env.development
VUE_APP_API_BASE=/api
# .env.production
VUE_APP_API_BASE=https://prod-api.comWebpack 开发服务器代理
直接配置 Webpack devServer（适用于自定义 Webpack 配置）：
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}注意事项
- 开发环境代理只对本地开发服务器生效
- 路径重写时注意斜杠处理
- 生产环境必须使用服务器端代理
- 跨域问题需同时配置后端 CORS 头
选择哪种代理方式取决于具体项目需求和部署环境。开发环境推荐使用 vue.config.js 配置，生产环境推荐使用 Nginx 等服务器软件配置。
