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 -->