nginx部署vue,转发,获取参数

1、

  location / {
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            if ( $query_string ~* ^id=111111$) {
                proxy_pass  http://1.1.1.1:8092; 
            }
        }  

 

访问必须  https://1.1.1.2:8080?id=111111

2、nginx配置ssl证书,并实现代理转发

server {
        listen 443 ssl;   #SSL协议访问端口号为443。此处如未添加ssl,可能会造成Nginx无法启动。
        server_name ***.com.cn;  #将localhost修改为您证书绑定的域名,例如:www.example.com。
        ssl_certificate cert/2698782_***.com.cn.pem;   #将domain name.pem替换成您证书的文件名。
        ssl_certificate_key cert/2698782_***.com.cn.key;   #将domain name.key替换成您证书的密钥文件名。
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件。
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置。
        ssl_prefer_server_ciphers on;   
        location / {
            proxy_redirect off;
            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_pass http://192.168.1.100:8091; 
            
        }  

#   ***.com.cn/test/**   都将转发至http://192.168.1.100:8761/test/
        location ~ /test/(.*)$ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Forward-For $remote_addr;
            proxy_pass http://192.168.1.100:8761/test/$1?$query_string;
            
        }
        location ~ /test2/(.*)$ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Forward-For $remote_addr;
            proxy_pass http://192.168.1.100:8763/XinDianAppData/$1?$query_string;
        }            
    } 

3、nginx部署vue项目

server {
        listen       80;
        server_name  localhost;
        root         D:/xinnaokang/ui/dist; #vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }      
    }

 

参考:

https://blog.csdn.net/liuxiao723846/article/details/54925328

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
部署Vue项目使用Nginx,你可以按照以下步骤进行操作: 1. 安装Nginx服务器,具体安装方法可以参考引用中提到的步骤。 2. 找到Nginx的安装目录,使用命令启动Nginx服务。可以使用引用中提到的命令 start nginx 来启动Nginx。 3. 找到Nginx的主配置文件,该文件的路径是 /conf/nginx.conf。你可以根据需要修改该文件中的配置信息,例如端口号、代理规则等。 4. 修改你的Vue项目的配置文件 vue.config.js。根据你的需求,可以配置Nginx的反向代理规则、负载均衡等。具体的配置方法可以参考引用中提到的文章。 通过以上步骤,你可以成功地使用Nginx部署Vue项目。请注意,这只是一个简单的指南,具体的操作可能会因个人需求和实际情况而有所不同。如果你对Nginx的配置和使用还不熟悉,建议你进一步学习Nginx相关的知识,以便更好地配置和管理你的Vue项目。123 #### 引用[.reference_title] - *1* [vue部署nginx](https://blog.csdn.net/weixin_45079813/article/details/121552726)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* *3* [手把手教 Nginx 部署 Vue 项目](https://blog.csdn.net/csdn_life18/article/details/126194337)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值