SpringBoot+Vue整合部署教程及刷新页面404问题

Sky是一只风

已于 2023-12-02 17:43:09 修改

阅读量1.7k

点赞数 4

文章标签： spring boot vue.js 后端 java

于 2023-11-30 22:57:19 首次发布

本文链接：https://blog.csdn.net/weixin_43805744/article/details/134723605

版权

最近笔者在部署一个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了。

时间紧凑，落笔比较匆忙，有时间再写得详细一些。