先了解知识：
const proxy = require('http-proxy-middleware');
module.exports = {
devServer:{
host: 'localhost', //target host
port: 8080,
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}}
},
//...
}
网上找的一个：
我来解释一下，了解大概意思即可：
1、前端服务运行在
localhost:8080
2、目标服务器是http://192.168.1.30:8085，这就是你的后端服务器地址。3、前端请求
localhost:8080/api/queryOrder，希望这个请求被转发到后端服务器http://192.168.1.30:8085/queryOrder。4、配置了
pathRewrite规则，将/api前缀重写为空，发送给后端请求时去掉/api部分。
【/api': {}，就是告诉node, 我接口只要是’/api’开头的才用代理】
1. 前端请求发起：
假设你的前端项目中使用 axios 来发送请求，代码可能是这样的：
import axios from 'axios';
axios.get('/api/data') // 请求地址是 /api/data
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
console.log('Error:', error);
});
在前端，axios.get('/api/data') 会发出一个请求，浏览器会尝试向 http://localhost:8080/api/data 发送请求。
2. webpack-dev-server 配置代理：
在你的 webpack.config.js 或 vue.config.js 文件中，你配置了 proxy 代理规则：
const proxy = require('http-proxy-middleware');
module.exports = {
devServer: {
host: 'localhost', // 目标主机，前端服务运行的主机
port: 8080, // 本地开发服务器的端口
proxy: {
'/api': { // 以 /api 开头的请求都会通过代理
target: 'http://192.168.1.30:8085', // 代理到这个后端服务
changeOrigin: true, // 如果后端 API 需要跨域，可以设置为 true
pathRewrite: {
'^/api': '/' // 重写路径，将请求的 /api 去掉，发给后端的 URL 为 http://192.168.1.30:8085/data
}
}
}
},
};
3. 请求流程：
前端请求：浏览器向
http://localhost:8080/api/data发送请求。这里
axios.get('/api/data')会被webpack-dev-server捕获，因为它匹配到了/api前缀。代理转发：
webpack-dev-server根据proxy配置，将请求代理到目标地址http://192.168.1.30:8085。
- 由于配置了
pathRewrite: {'^/api': '/'}，请求路径/api/data会被重写成/data，最终请求的地址是http://192.168.1.30:8085/data。后端处理：
http://192.168.1.30:8085这个后端服务会接收到请求并进行处理，返回响应数据。响应返回：后端返回的数据会通过代理服务器
webpack-dev-server转发回浏览器，前端页面就可以接收到响应数据。
4. 请求示例：
前端请求：
http://localhost:8080/api/data
这会被webpack-dev-server转发到：http://192.168.1.30:8085/data
最终的后端 URL 为：http://192.168.1.30:8085/data
5. Nginx 代理：
假设你有一个生产环境的 Nginx 配置，想要将前端请求代理到后端服务，Nginx 配置可能是这样的：
server {
listen 70;
# 假设前端文件存放路径
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 代理 /api 请求到后端服务
location /api/ {
proxy_pass http://192.168.1.30:8085/; # 将请求代理到后端
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
-
listen告诉 Nginx 监听哪个端口。 -
在
listen 70;中，70表示 Nginx 监听的端口号。通常这个端口号应该和前端（比如 Vue.js 开发环境中的 Webpack Dev Server）的端口一致，特别是当你想要通过 Nginx 代理或转发请求时。 -
前端的请求仍然是
http://localhost:8080/api/data，这会被webpack-dev-server转发到后端。 -
如果你使用 Nginx 进行生产环境部署，那么
Nginx会把/api请求转发到后端服务http://192.168.1.30:8085/。
前端生产环境（nginx代理）和开发环境是否冲突-CSDN博客
nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即 可，其中80端口可以省略，其浏览器展示效果如图所示
【首先nginx占用端口80，若依前端默认80改为70，】
总结：
- 开发环境：在开发环境中，你通过
webpack-dev-server配置的代理将/api的请求转发到目标后端服务。 - 生产环境：你可以在 Nginx 中配置类似的代理规则，将前端请求代理到后端服务。
前端部署
打开前端项目的vue.config.js文件，
检查devServer下的proxy代理部分，然后将下面这个端口修改为你要在打包后访问的端口，即使用nginx代理前的接口。这个端口默认是80端口，这里把其修改为不会冲突的70端口，不推荐使用80端口。
因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。
除了这个70端口外，下面的target的url和端口要和你服务器上能访问到后台的接口一致。
npm run build:prod
