vue打包发布在spingboot项目中 vue-router路由的处理

（原）

以下例子springboot后端地址为:localhost:7080/pingandai

vue前端地址为:locahost:8080/pingandai/

1、如果路由模式设置的是history。

那么最好带上base，（base是根目录的地址，比如你在页面上访问localhost:8080/b，那么它会自动跳转到localhost:8080/pingandai/b路径上）

打包完成后(打包过程这里不再描述，npm run build,网上很多例子)，如果将dist下的文件都拷贝到springboot中resources/static目录下（比如后台的地址为localhost:7080/pingandai），此时你在URL上输入localhsot:7080/pingandai/b,你是找不到页面的，原因是它在controller中找地址，发现没有，直接就跳到错误页面了，由于前端打包后只有一个index.html页面，所以我们把请求错误重定向到index.html就可以了。

路由官网的描述在这里：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

我们在spring中怎么配呢？

在springboot2.0以下和springboot2.0以上的配置不一样，有些公司用的springboot2.0+的版本，但是网上给的全是

这种代码，springboot2.0以上的版本已经把EmbeddedServletContainerCustomizer给移除了，所以根本找不到，先看下官网在二个版本中不同的写法。

https://docs.spring.io/spring-boot/docs/1.5.21.BUILD-SNAPSHOT/reference/htmlsingle/#boot-features-programmatic-embedded-container-customization

https://docs.spring.io/spring-boot/docs/2.0.9.RELEASE/reference/htmlsingle/#boot-features-programmatic-embedded-container-customization

1.5.21版本代码如下：

2.0.9版本代码如下：

这里的nofount.html就是index.html页面：

这样，通过http://localhost:7080/pingandai/b就可以正常访问到页面了。

注意：如果前端的路由设置的是二级或以上的话，页面是访问不了的，就像这样：

前端访问地址为：http://localhost:7080/pingandai/a/b，控制台会报错：

原因是vue是一个单页面应用，打包后的文件index.html引用js和css的路径为其目录下的相对路径：

但是放在浏览器上，它会从url上找当前路径，就变成了去pingandai/a/static/…目录下找资源，这肯定是找不到的。js及css资源路径应该在pingandai/static/… 下。所以路由在history模式下打包后若要发布在springboot项目中，需要注意路径的地址不要出现多级。

2、 如果路由模式设置的是默认的hash

如果路由是hash模式打包放到springboot的resources/static目录下，以上history模式不能访问二级url地址的问题就不存在了。

但是它的访问路径将会变成:locahost:7080/pingandai/#/a或者locahost:7080/pingandai/#/a/b才行，由于hash模式中#后面字符是页面定位的，所以不会发送给后端（比如url上输入的是locahost:7080/pingandai/#/a/b，后端实际收到的请求地址是locahost:7080/pingandai），这里的locahost:7080/pingandai实际上是访问的index.html页面（因为找不到这个页面会跳到错误页面index.html上，前提是配置了错误页面），在这个页面上显示的内容则完全由#后面的内容控制。

但是这样会存在一个问题，如果springboot集成了shiro，那么权限过滤时必然要设置成这样filterMap.put("/**", "过滤器");过滤器如果是/anon，这会导至页面所有请求都放行，刚才的locahost:7080/pingandai/#/a和locahost:7080/pingandai/#/a/b是可以访问了，但是权限过滤不生效。如果设置成/oath(假定这里的oath是权限拦截的过滤器),那么/a和/a/b页面又出不来。

由于以上问题，所以最好不要直接打包后放到spingboot下，用单独的tomcat或nignx去部署。