vue部署宝塔nginx配置(获取用户ip地址、反代理访问api接口、websocket转发)

以下配置为我自己的需求,因人而异,如果只是单纯的前端非交互页面,可以不用修改配置。

代码及注释,如下:

Puppet 复制代码
    #解决vue-router设置mode为history,去掉路由地址上的/#/后nginx显示404的问题
    location / {
      proxy_http_version 1.1;
      try_files $uri $uri/ /index.html;
    }
    
    #获取用户真实ip地址
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    #反向代理访问api接口
    location /api{
        proxy_http_version 1.1;
        rewrite ^.?api/?(.*)$ /$1 break; 
        include uwsgi_params;
        proxy_pass http://XXX.XXX.XXX.XXX:8888;
    } 

    #https下使用wss的websocket转发
    location /chat{
      proxy_pass http://175.XXX.XXX.XXX:8082;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header X-real-ip $remote_addr;
      proxy_set_header X-Forwarded-For $remote_addr;
    }
相关推荐
Mintopia几秒前
如何看待大模型发展瓶颈:从算力、数据到对齐与系统工程的再评估
前端·人工智能
Mintopia4 分钟前
Gemini-Essay-Writer 技术解析:基于 Gemini 的长文写作生成与质量控制实践
前端
蜡台4 分钟前
Node Vue 项目开发常见问题解决
前端·javascript·vue.js·git·node
嘉琪0017 分钟前
Day1 完整学习包(var/let/const + 作用域)——2026 0310
前端·javascript·学习
Moment11 分钟前
2026 年 Next.js 站点的 SEO 优化指南
前端·javascript·面试
We་ct13 分钟前
LeetCode 46. 全排列:深度解析+代码拆解
前端·数据结构·算法·leetcode·typescript·深度优先·回溯
problc14 分钟前
前端预览pdf有哪些方案
前端·pdf
小小仙。16 分钟前
IT自学第三十二天
服务器·前端·javascript
@大迁世界20 分钟前
01.什么是 ReactJS?
前端·javascript·react.js·前端框架·ecmascript
l1t22 分钟前
利用DuckDB 1.5的json和struct功能分析llama web-ui导出的对话json文件
前端·ui·json