springBoot + vue前后端分离项目部署到服务器

本文介绍了如何将一个SpringBoot+Vue的前后端分离项目部署到服务器。首先,前端被打包成静态文件放入SpringBoot项目的resources目录下,并修改index.html的资源路径。接着,项目被打包成jar包,上传到服务器,并通过命令行启动。最后,提到了打War包的步骤和注意事项,包括在外部Tomcat部署时的配置调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、npm run build将前端打包成静态文件(会在dist目录下生成static文件夹以及index.html文件)
在这里插入图片描述
上图为:config目录index.js配置的build以及dev命令,如果你没找到static文件夹及index.html,到这里看一下你的路径是否配置的是dist路径;
二、在springboot项目,resources目录下,将打包好的静态文件夹及index.html文件一起复制到该文件夹下。
在这里插入图片描述
修改index.html:
资源路径:../static/js/app.2d923a2f958b54ba7f47.js以此类推,重点:最开始那个static不用写,写一个就行
原index.html的路径:在这里插入图片描述
下面这个可能报错
在这里插入图片描述

此时,就可以直接运行项目本地测试跑起来,ok,没有任何问题,但是登录时却出现了问题,无法正常登录404,找不到资源路径;开始查找原因,这将是一个非常漫长且有趣味的过程;因为在springboot+vue的项目所有路径都会通过org.apache.shiro.web.filter.authc.FormAuthenticationFilter过滤器进行拦截;
过滤器拦截的过程中,会验证该登录的url是否为一个登录的url,即是否“/login”,问题找到了,为什么直接使用前端8080端口直接是“/login”,打包成静态文件之后就改变了呢,找到api目录下http.js,问题在于打包之后的静态文件,会将url整合传到后台,此时的路径自然会被拦截。

在这里插入图片描述
此时将const adminApiGateway = '/api’的/api去掉即可解决问题。
在这里插入图片描述
三、通过package将项目打包成jar包,生成在target目录下面,将该jar包上传到服务器的某个文件夹下(比如:usr/java下):
在这里插入图片描述
在这里插入图片描述
或者输入命令:mvn package Dmven.test.skip=true /跳过测试类

四、通过命令启动项目。
windows : java -jar vue-server-0.0.1-SNAPSHOT.jar

linux:
1.ps -aux|grep + jar包名.jar --查看进程

2.kill -s 9 + 进程号 --杀进程

3.nohup java -jar + jar包名.jar > console.log 2>&1 & --启动进程(在此之前可以在同级目录下新建一个console.log文件用来存放日志信息,可以随时下载console.log查看项目运行状态)。

完成启动,地址加端口号(后端的)即可访问,如果你配置了项目名在端口号后面加上你的项目名即可。

附:打War包:
1:一:更改程序入口类 Application.java 使其继承SpringBootServletInitializer,并重写configure方法
在这里插入图片描述

2.

### SpringBootVue 前后端分离项目部署至阿里云服务器教程 #### 服务器准备 为了成功部署SpringBootVue组成的前后端分离项目,需先准备好阿里云ECS服务器。对于初次使用者来说,建议选择配置适合开发测试环境的基础型实例即可满足需求[^1]。 #### 工具安装与环境搭建 确保已安装必要的工具如Xshell用于SSH远程登录管理服务器以及Xftp实现文件传输功能。此外,在服务器内部还需完成Java运行环境(JDK)、Node.js等相关依赖项的设置以便支持应用正常运作[^2]。 #### 后端服务发布流程 针对基于Spring Boot框架构建的应用程序而言,可以考虑采用打包jar的形式上传至目标主机并执行启动命令的方式来进行部署;或者利用Docker容器化技术简化运维过程中的复杂度,提高跨平台兼容性和稳定性。 ```bash nohup java -jar your-springboot-app.jar & ``` 如果选择了后者,则应提前规划好镜像制作、推送至仓库等环节的工作内容,并编写相应的docker-compose.yml来定义多容器编排方案。 #### 前端资源上线方法 对于由Vue CLI创建出来的单页面应用程序(SPA),通常会将其构建成静态网页形式并通过Nginx反向代理映射到指定域名下访问。因此需要在本地环境中通过`npm run build`指令生成dist目录下的生产版本文件夹之后再借助FTP/SFTP等方式同步至线上空间内[^3]。 ```nginx server { listen 80; server_name example.com; location / { root /path/to/dist; try_files $uri $uri/ /index.html; } } ``` 最后重启Nginx使更改生效: ```bash sudo systemctl restart nginx ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值