若依前端挂Nginx、打包部署运行！！！！

先相识知识：

1. const proxy = require('http-proxy-middleware');
3. module.exports = {   
4.         devServer:{
5.             host: 'localhost', //target host
6.             port: 8080,
7.             //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
8.             proxy:{
9.                 '/api':{
10.                     target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
11.                     changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
12.                     //ws: true, // proxy websockets
13.                     //pathRewrite方法重写url
14.                     pathRewrite: {
15.                         '^/api': '/'
16.                         //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
17.                         //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
18.                    }
19.             }}
20.         },
21.         //...
22. }

复制代码

   网上找的一个：
  我来解释一下，相识大概意思即可：
  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 来发送请求，代码可能是这样的：

1. import axios from 'axios';
3. axios.get('/api/data')  // 请求地址是 /api/data
4.   .then(response => {
5.     console.log('Response:', response.data);
6.   })
7.   .catch(error => {
8.     console.log('Error:', error);
9.   });

复制代码

 在前端，axios.get('/api/data') 会发出一个请求，浏览器会实验向 http://localhost:8080/api/data 发送请求。
2. webpack-dev-server 设置代理：

在你的 webpack.config.js 或 vue.config.js 文件中，你设置了 proxy 代理规则：

1. const proxy = require('http-proxy-middleware');
3. module.exports = {   
4.   devServer: {
5.     host: 'localhost', // 目标主机，前端服务运行的主机
6.     port: 8080, // 本地开发服务器的端口
7.     proxy: {
8.       '/api': {  // 以 /api 开头的请求都会通过代理
9.         target: 'http://192.168.1.30:8085',  // 代理到这个后端服务
10.         changeOrigin: true, // 如果后端 API 需要跨域，可以设置为 true
11.         pathRewrite: {
12.           '^/api': '/'  // 重写路径，将请求的 /api 去掉，发给后端的 URL 为 http://192.168.1.30:8085/data
13.         }
14.       }
15.     }
16.   },
17. };

复制代码

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 设置可能是这样的：

1. server {
2.   listen 70;
4.   # 假设前端文件存放路径
5.   root /usr/share/nginx/html;
6.   index index.html;
8.   location / {
9.     try_files $uri $uri/ /index.html;
10.   }
12.   # 代理 /api 请求到后端服务
13.   location /api/ {
14.     proxy_pass http://192.168.1.30:8085/;  # 将请求代理到后端
15.     proxy_set_header Host $host;
16.     proxy_set_header X-Real-IP $remote_addr;
17.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
18.     proxy_set_header X-Forwarded-Proto $scheme;
19.   }
20. }

复制代码

• listen 告诉 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端口可以省略，其浏览器展示结果如图所示
总结：

• 开发环境：在开发环境中，你通过 webpack-dev-server 设置的代理将 /api 的请求转发到目标后端服务。
  
• 生产环境：你可以在 Nginx 中设置雷同的代理规则，将前端请求代理到后端服务。
  

部署若依：

先前后端启动运行，查看：
留意：前端是运行在80端口，后端是8080端口

前端打包后，dist文件放到ngnix内里

 
 以是ngnix中ngnix.conf:

1. server {
2.         listen       8888;
3.         server_name  localhost;
5.         #charset koi8-r;
7.         #access_log  logs/host.access.log  main;
8.                
10.         # 提供静态文件
11.                 location /{
12.                         root   html/dist;  # 打包好的文件路径
13.                         try_files $uri $uri/ /index.html; # 将所有路由请求重定向到index.html
14.                 }
16.                 # 代理后端 API 请求
17.                 location /prod-api/ {
18.                         proxy_pass http://localhost:8080/;
19.                         proxy_set_header Host $http_host;
20.                         proxy_set_header X-Real-IP $remote_addr;
21.                         proxy_set_header REMOTE-HOST $remote_addr;
22.                         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
24.                        
25.                 }

复制代码

Ngnix先容、安装、实战及用法！！！-CSDN博客
然后启动ngnix，发现确实是8888端口

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。