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

最新推荐文章于 2026-05-02 16:42:23 发布

原创最新推荐文章于 2026-05-02 16:42:23 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

运维专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Nginx的高级配置方法，包括基于条件的代理转发、SSL证书配置，以及如何部署Vue.js项目，确保静态资源正确加载并处理SPA的路由问题。

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;
}
}