将vue-cli打包出来的文件丢进java中并映射路由

1. 在build/utils.js中修改如下配置,加入publicPath(修正样式资源路径)

   mark

2. 在config/index.js中修改build(打包时配置)属性中的配置assetsPublicPath

   mark

   此处我修改为后端项目地址,可以采取自定义配置文件的方式 防止修改项目路径的地方过多导致忘记

3. 在vue-router的配置文件中增加base属性 该属性用于配置所有路由的根路径 mark

   此处我配置成后端接口地址(用于后端通配符匹配该路径下的子路由转发给index.html)

   ​

   此时前端已经配置完了,可以进行打包

4. 由于我们将静态资源的路径改成了项目根路径 所以将所有静态资源放入webapp下即可(如果你在上面打包配置中设置的路径不是项目根路径,需要根据你的路径进行放置静态文件)
   

   mark
5. 创建index.jsp 将index.html中内容放入jsp中 mark
6. 在第3步中v-router配置文件中的base路径对应的控制器下创建映射路由的方法 mark

   将所有backstage/manager/page下的路径都映射到index.jsp中就能实现rest路由了

总结:原理就是把所有请求都映射到index.html中,让vue-router来判断当前路径然后渲染相应的view。至于路径,都是因人而异的 图片中路径仅供参考。

如果可以接受中间层的话可以考虑直接使用nuxt,该脚手架提供了中间件解决方案 并使用node进行服务端渲染 对seo有需求的可以考虑。