将vue-cli打包出来的文件丢进java中并映射路由
-
在build/utils.js中修改如下配置,加入publicPath(修正样式资源路径)
mark -
在config/index.js中修改build(打包时配置)属性中的配置assetsPublicPath
mark此处我修改为后端项目地址,可以采取自定义配置文件的方式 防止修改项目路径的地方过多导致忘记
-
在vue-router的配置文件中增加base属性 该属性用于配置所有路由的根路径mark
此处我配置成后端接口地址(用于后端通配符匹配该路径下的子路由转发给index.html)
此时前端已经配置完了,可以进行打包 -
由于我们将静态资源的路径改成了项目根路径 所以将所有静态资源放入webapp下即可(
如果你在上面打包配置中设置的路径不是项目根路径,需要根据你的路径进行放置静态文件)
mark -
创建index.jsp 将index.html中内容放入jsp中mark
-
在第3步中v-router配置文件中的base路径对应的控制器下创建映射路由的方法mark
将所有backstage/manager/page下的路径都映射到index.jsp中就能实现rest路由了
总结:原理就是把所有请求都映射到index.html中,让vue-router来判断当前路径然后渲染相应的view。至于路径,都是因人而异的 图片中路径仅供参考。
如果可以接受中间层的话可以考虑直接使用nuxt,该脚手架提供了中间件解决方案 并使用node进行服务端渲染 对seo有需求的可以考虑。
