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);
    }
}

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

相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel6 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常6 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip6 小时前
JavaScript事件流
前端·javascript
皮皮林5516 小时前
SpringBoot 全局/局部双模式 Gzip 压缩实战:14MB GeoJSON 秒变 3MB
java·spring boot
小菜全6 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json