主要流程

主要流程参考 Spring Boot+Vue从零开始搭建系统（三）：项目前后端分离_实现简单登录demo

坑

其中有一个坑。如后端项目端口为45032，前端端口为8080，当在前端运行npm run build之后，将生成的dist文件夹下的static目录以及index.html文件移动到springboot后端的resources/static文件夹下后，后盾目录是/resources/static/static/(css和js)、/resources/static/index.html，此时访问localhost:45032/{context-path}后，js和css文件会报404错误，F12看资源定位是路径问题，在网上查找相关资料后，发现只需要在前端项目中的/config/index.js下build{}区域模块中，将assetsPublicPath中的‘/‘改为’./‘即可，重启后端项目，便可正常访问css、js资源。

其他参考资料

[1] A Lovely Spring View: Spring Boot & Vue.js
[2] Build a Simple CRUD App with Spring Boot and Vue.js
[3] Vue.js Frontend with a Spring Boot Backend
[4] Springboot项目与vue项目整合打包