宝塔面板vue项目进行反向代理

---

前言

本地vue项目运行的时候使用了配置proxy反向代理来解决前端跨域问题，但是proxy部署到服务器上就会失效，所以要服务器也要配置反向代理，记录一下我在宝塔面板上如何快速配置前端项目的反向代理。

第一步

登录宝塔面板进入软件商店点击Nginx反向代理的设置（如果没安装就自己去安装一下）

进入配置修改查看Nginx配置文件存放路径
在这里插入图片描述

第二步

宝塔面板文件下进入nginx路径自己建立一个conf

第三步

配置conf文件然后保存然后重启一下反向代理就成功了

server {
    listen  8080; // 前端端口号
    server_name paysys.theonelyq.cn;  // 服务名称
    index index.html;
    root /www/wwwroot/paysys.theonelyq.cn; // 前端项目地址
    
    
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    
    location @router {
        rewrite ^.*$ /index.html last;
    }
    

    location ^~/api/ {
        proxy_pass xxxxxxxxxx; // 代理的后端服务接口
    }
}