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