SpringBoot+Vue前后端分离跨域项目的宝塔面板部署上线(全网最详细)_宝塔部署springboot vue

基于 Spring Boot + Vue 的前后端分离项目的部署方式主要有如下两种：
1前后端一起部署：将 Vue 项目打包后的dist文件放到 Spring Boot 项目的资源目录下，然后在服务器上部署 Spring Boot 项目即可，终究还是后端项目，并不是真正的分离部署。
2前后端单独部署：将 Spring Boot 项目打包后部署到服务器，再将 Vue 项目打包部署至服务器，最后配置 Nginx 解决请求跨域时的端口转发问题。
第一种方式较容易，也无需进行服务器跨域的相关配置，都使用的是Tomcat服务器进行部署。适合小型项目，如果部署的项目比较大，会造成Tomcat服务器的压力，响应速度也变慢。
第二种方式稍微复杂些，需要在 Nginx 下配置跨域时的端口转发。本文将介绍后者（使用宝塔可视化式部署）。在该方式下，后端 Spring Boot 使用内嵌的 Tomcat 运行，前端 Vue 则需要借助 Nginx 运行（需完成跨域时的请求端口转发）。所以部署前需要在服务器上安装 Nginx 环境。

之前在B站跟着博主写了一个前后端分离的项目，前端工程使用Vue-cli脚手架，后端工程使用SpringBoot，前端和后端分别为8087和8088端口，需跨域配置。自己踩了很多坑，研究了几天才部署成功。现将经验分享。

后端打包

后端项目打包之前，需要将某些配置改为服务器的配置。
将允许跨域设置为服务器IP+端口

将数据库配置为服务器IP地址，并且设置后端项目上下文如/api

通过Maven的package打包为jar包

用xshell工具上传到服务器的/www/wwwroot下的位置，

至此，后端打包完成。

前端打包

请求加上前缀
还记得我们在SpringBoot中加了/api的应用上下文吗？现在将前端所有向后端URL请求中加上/api的前缀。

配置转发代理

如图分别配置如下

在前端终端输入 npm run build
将打包生成的dist文件下的static静态文件，和index.html上传到Linux服务器上。

上传路径如下。

部署后端

在宝塔上添加JAVA项目
jar路径选择上传jar包的路径
端口选择后端的8088端口
保存配置

后端部署成功时，可以用postman测一下接口。可以请求成功**，后端部署完毕。**

部署前端

使用nginx部署前端项目，如果没有按照nginx可以去宝塔面板上安装一个。
打开nginx的配置文件，目录在/www/server/nginx/conf/ 下的nginx.conf

只需配置3项
1 端口设置为与前端端口一致
2 root+静态资源的项目路径
3 配置location 以及代理的路径
nginx端口设置为与前端一致
root选择前端项目打包后的位置
在location中配置访问的 /api 路径，nginx就可以帮我们反向代理到请求的服务器地址了。实现了跨域访问。
前后端部署结束

测试

访问一下项目，服务器IP+端口。

能请求到后端数据，部署成功

附上作者部署好的网站域名(购买了域名，通过域名访问)

部署好的个人博客网站

www.haocheng666.cn:8087

访问不了？噢，我的腾讯云服务器过期了。没钱续费。。

项目码云地址
https://gitee.com/whc9821/Blog
如果这篇文章解决了你的问题，麻烦给作者点赞评论鼓励