(原)
以下例子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给移除了,所以根本找不到,先看下官网在二个版本中不同的写法。
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去部署。