springBoot + vue前后端分离项目如何部署到服务器(尝试各种方法终究是路径问题导致无法正常登录)

第一步:命令行npm run build将前端打包成静态文件(一般会在dist目录下生成static文件夹以及index.html文件)

 
 

上图为:config目录index.js配置的build以及dev命令,如果你没找到static文件夹及index.html,到这里看一下你的路径是否配置的是dist路径;

第二步:在你后台的资源(resources)目录下新建一个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下)

第四步:通过命令启动项目

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

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

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

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

猜你喜欢

转载自blog.csdn.net/Silenchen11/article/details/81068541