宝塔面板-部署vue项目（使用反向代理连接后端接口）

前言

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

部署教程

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

• 进入配置修改查看Nginx配置文件存放路径

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

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

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

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

总结

这个实现原理就是：宝塔里的nginx配置文件实际上是放在某个路径里，然后通过引入这个文件进行加载。所以我们只需要找到这个配置文件进行添加反向代理代码即可。

教程已经很详细，如果还有小伙伴不懂的，可以联系博主解决。