springboot与vue集成

最新推荐文章于 2024-11-07 08:51:17 发布

weixin_30569001

最新推荐文章于 2024-11-07 08:51:17 发布

阅读量147

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/falcon-fei/p/11060059.html

博客介绍了将开发好的Vue文件集成到Spring Boot的Web项目中集成打包的方法。先单独打包Vue项目，将文件复制到Spring Boot项目的static文件夹下，给index.html设置转发。还提到解决vue-router histroy刷新404问题，通过实现ErrorPageRegistra接口解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：vue项目一般是单独开发单独部署，但是某些时候我们既想使用vue的各种方便组件与双向数据绑定，又想直接把开发好的vue文件集成到springboot的web项目中集成打包。

先执行npm run build单独打包vue项目，将build的文件内容复制到springboot项目resource下的static文件夹下，文件结构如下图

给index.html一个转发，这样可以在浏览器中输入http://127.0.0.1:8993/ 这种默认首页的时候，直接打开vue项目中的index.html

@Controller
public class IndexController {
    @RequestMapping("/")
    public String index()
    {
        return "forward:/index.html";
    }

}

vue-router histroy刷新404

由于后台中使用了springsecurity作为权限认证框架，因此当直接刷新或输入url访问时，该url是不存在或者无权限的因此增加 error-page的方式解决，在springboot 2.*中是通过实现ErrorPageRegistra接口来实现的，代码如下：

@Component
public class ErrorPageConfig implements ErrorPageRegistrar {

    @Override
    public void registerErrorPages(ErrorPageRegistry registry) {
        ErrorPage error401Page=new ErrorPage(HttpStatus.UNAUTHORIZED,"/index.html");
        registry.addErrorPages(error401Page);
    }
}

转载于:https://www.cnblogs.com/falcon-fei/p/11060059.html