最近笔者在部署一个SpringBoot(Maven)+Vue项目的时候遇到了如题的问题,浅浅记录一下。
部署教程
1.在Vue项目下运行“npm run build”命令
2.打包成功后,项目的根目录下会生成一个/dist目录,里面有/static和index.html
3.将/dist下面的所有东西(index.html和/static文件夹)复制粘贴到你的SpringBoot项目目录下的位置,具体如图:
4.然后在IDEA右侧Maven菜单栏的Lifecycle中双击“package”工具
5.项目会自动打包为.jar文件,位置如图(如果你打包成了war包,请在pom.xml中的"packaging"下修改)
6.在Mac的终端/Windoes的cmd中使用“java -jar yourjarname.jar”命令快捷部署。
7.部署成功后,在本地浏览器中localhost:yourport,或者在任何一台能够ping通你的本地服务器的主机上的,在浏览器中输入服务器ip:yourport,即可访问(注意把yourport换成你项目设定的端口号)
刷新页面404问题
原因
Vue开发的应用,采用的是SPA单页面模式,只有一个index.html入口文件,后续的界面跳转都是通过js控制路由跳转实现的,当前端Vue路由设置为“history”的时候,必须在SpringBoot中设置重定向。
解决方法
按照下图的结构,在对应的位置新建你的错误配置类ErrorConfig.java
该类中的代码除了最上面自动生成的一行“package com.example.xxxx;”之外,剩余代码如下:
import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;
@Component
public class ErrorConfig implements ErrorPageRegistrar {
@Override
public void registerErrorPages(ErrorPageRegistry registry) {
ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
registry.addErrorPages(error404Page);
}
}
小锤子Build一下Project,然后用Maven打包即可。此时你会发现刷新页面时不会再跳转404了。
时间紧凑,落笔比较匆忙,有时间再写得详细一些。