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