通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南（三更）

阿里云服务器->FinalShell->宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目，并且是分模块开发的项目部署到服务器上，记录一下踩坑的地方，结合C站大佬的解决方案，循循善诱一步步部署到服务器上，简单，快速！

https://www.aliyun.com/ 使用阿里云的时候，个人建议还是切换成旧版，操作更加简洁。 选择阿里云服务器时在配置过程中，注意：操作系统选择较为完备成熟的centos7。 进入实例，重置你的密码

点击进入实例，配置安全组，就是放开你项目中所需要运行的端口 点击添加安全组，配置你所需放行的端口

Windows版下载地址: http://www.hostbuf.com/downloads/finalshell_install.exe 安装完成后： 连接成功

宝塔地址： https://www.bt.cn/new/index.html 复制Centos安装脚本：

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

这里注意 现在可以通过宝塔面板反馈的账号密码，登录到宝塔面板了。

进入到宝塔面板会让你绑定宝塔的账号，就用手机号注册就行了。 然后会推荐安装插件，选左边系统推荐的，一键安装就行。 刚才在阿里云配置了安全组（放行端口），宝塔面板也同样需要放行端口。 新建数据库： 导入本地准备的sql文件。进行导入，导入成功后，点击管理，用你的数据库账号登录管理器可以查看你的数据库信息。 宝塔的配置暂时到这里。

打包前修改原来的启动端口： sg-blog-vue：8093 sg-blog-admin：8094 sg-blog-vue： 把target的指向改为自己宝塔左上角的ip地址+后端端口号

此时sg-blog-vue修改完备： 在控制台（当前目录）输入：npm run biuld命令进行打包。生成dist文件

sg-blog-admin： 同样将原来的localhost改为ip+后端端口号 注意：🕳 然后配置一下router下的index.js文件，有路由缺失，不配置的话，打包部署后，只能展示左侧目录，不能对应功能。 index.js配置如下：

这里退出登录的路由会跳转到index， 但是服务器找不到index，这里直接设置’/'跳转首页去 由于生产环境和blog不同，现在sg-vue-admin模块项目使用下面命令打包:

如果出现打包错误：

注释掉以下内容：

至此前端文件打包完毕；

这里如果代码打包出现问题，可以去我主页看看我总结的解决方案： https://blog.csdn.net/weixin_51285339/article/details/128785245?spm=1001.2014.3001.5501 我的项目结构： framework父文件加入打包插件依赖：

admin和blog子模块添加biuld：

刷新maven后，将前端sg-blog-vue和sg-blog-admin生成的dist文件，新建一个static包，然后复制到src\main\resources\static目录下，将前后端项目整合打包，实现一个伪前后端分离，便于宝塔直接部署。 在打包之前，配置一下两个模块中application的数据库文件，换成自己的ip地址，并且这里的username和password要和宝塔上创建的数据库一致，不然连接不了数据库。

然后进行打包

在指定的目录下创建两个文件夹，用来存放刚才的两个jar包 上传目标jar包

打开终端，cd到存放jar包的目录，执行命令：

如果启动发现端口被占用了， 输入netstat -lnp命令查看端口信息， 使用sudo kill xxx进行删除

此时通过ip+端口访问你的项目就成功了：

前台：

后台：

并且宝塔退出后网站也不会挂掉。

部署结束，感谢B站三更和C站的博主为我的项目提供了莫大的帮助，部署过程中出现困难或者文章有纰漏欢迎留言讨论。

参考文章👍： https://blog.csdn.net/qq_52030824/article/details/127982206 https://blog.csdn.net/weixin_43352606/article/details/124134029