springboot与vue集成

背景：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);
    }
}