nginx部署vue项目

Nginx部署Vue项目：解决刷新404及隐藏URL转发问题

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 636 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #运维

本文介绍了如何在Nginx配置中解决Vue项目部署时的刷新404问题，以及如何通过location设置隐藏部分URL并进行后端服务的反向代理。重点讲解了try_files和proxy_pass的使用方法。

nginx部署vue

解决nginx中vue项目刷新报404问题
解决nginx转发后端服务隐藏部分url
- 访问url路径/prod-api/api经过nginx反向代理后，到达后端服务的实际url地址为/api。

解决nginx中vue项目刷新报404问题

        location / {                                                                                                                                                                        
            root   /html/dist;                                                                                                                 
            index  index.html index.htm;                                                                                                                                                                       
            try_files $uri $uri/ @router;   # 解决nginx中vue项目刷新报404问题                                                                            
        }                                                                                                                                                                                     
        location @router {                                                       
                rewrite ^.*$ /index.html last;                                              
        }

解决nginx转发后端服务隐藏部分url

访问url路径/prod-api/api经过nginx反向代理后，到达后端服务的实际url地址为/api。

      location ^~/prod-api/ {                                                                                                                                                                                
                proxy_set_header X-Real-IP $remote_addr;                                                                                                                                                       
                proxy_set_header REMOTE-HOST $remote_addr;                                                                                                                                                     
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                                                                                                                                   
                proxy_set_header X-NginX-Proxy true;                                                                                                                                                           
                proxy_pass http://127.0.0.1:xxxx/;                                                                                                                                                             
        }