Vue打包文件dist放在SpringBoot项目下运行(正确实现全过程)(下)

在上一篇中,实现了Vue打包文件dist放在SpringBoot项目下运行。

Vue打包文件dist放在SpringBoot项目下运行(正确实现全过程)(上)

问题

路由刷新会产生404的问题。

原因

vue开发的应用,采用的是SPA单页面模式

每一个页面对应一个html文件,当刷新页面的时候,会主动向后端请求对应的html文件,拿到html文件后渲染界面,但是SPA单页面模式只有一个index.html入口文件,后续的界面跳转都是通过js控制路由跳转实现的。

解决

当我们直接输入/login路径时,先将页面重定向到/index.html,然后通过js控制路由实现跳转就可以了。

项目中增加配置

java 复制代码
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistrar;
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);
    }
}

项目重启后,刷新就可以了。

相关推荐
90后的晨仔11 分钟前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀15 分钟前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
Javashop_jjj25 分钟前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
我登哥MVP37 分钟前
Ajax 详解
java·前端·ajax·javaweb
PHP源码1 小时前
SpringBoot校园二手商城系统
java·spring boot·springboot二手商城·java校园二手商城系统
非凡ghost1 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
毕业设计制作和分享1 小时前
springboot159基于springboot框架开发的景区民宿预约系统的设计与实现
java·spring boot·后端
馨谙1 小时前
/dev/null 是什么,有什么用途?
前端·chrome
JamSlade2 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保2 小时前
react useState ts定义类型
前端·react.js·前端框架