springboot與vue集成

<!-- wp:heading {"level":3} -->

<h3><strong>背景</strong>：vue項目通常是單獨開發單獨部署，可是某些時候咱們既想使用vue的各類方便組件與雙向數據綁定，又想直接把開發好的vue文件集成到springboot的web項目中集成打包。<br><br></h3> <!-- /wp:heading -->

<!-- wp:heading {"level":3} -->

<h3>先執行npm run build單獨打包vue項目，將build的文件內容複製到springboot項目resource下的static文件夾下，文件結構以下圖</h3> <!-- /wp:heading -->

<!-- wp:image -->

<figure class="wp-block-image"><img src="http://static.forever24.cn/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png" alt=""/></figure> <!-- /wp:image -->

<!-- wp:paragraph -->

<p>給index.html一個轉發，這樣能夠在瀏覽器中輸入http://127.0.0.1:8993/ 這種默認首頁的時候，直接打開vue項目中的index.html<br></p> <!-- /wp:paragraph -->

<!-- wp:code -->

<pre class="wp-block-code"><code>@Controller public class IndexController { @RequestMapping("/") public String index() { return "forward:/index.html"; } } </code></pre>

<!-- /wp:code -->

<!-- wp:paragraph -->

<p>vue-router histroy刷新404</p> <!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>因爲後臺中使用了springsecurity做爲權限認證框架，所以當直接刷新或輸入url訪問時，該url是不存在或者無權限的所以增長 error-page的方式解決，在springboot 2.*中是經過實現ErrorPageRegistra接口來實現的，代碼以下：</p> <!-- /wp:paragraph -->

<!-- wp:code -->

<pre class="wp-block-code"><code>@Component public class ErrorPageConfig implements ErrorPageRegistrar { @Override public void registerErrorPages(ErrorPageRegistry registry) { ErrorPage error401Page=new ErrorPage(HttpStatus.UNAUTHORIZED,"/index.html"); registry.addErrorPages(error401Page); } } </code></pre>

<!-- /wp:code -->

<!-- wp:paragraph -->

<p><br></p> <!-- /wp:paragraph -->