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