Vue + SpringBoot 前后端分离项目用Maven自动打包合并为单体项目 |
您所在的位置：网站首页 › vue项目和springboot前后分离部署 › Vue + SpringBoot 前后端分离项目用Maven自动打包合并为单体项目 |
Vue + SpringBoot 前后端分离项目用Maven自动打包合并为单体项目
|
前端打包模块详细文档 https://github.com/eirslett/frontend-maven-plugin 本项目地址 https://gitee.com/luvying/vue-maven-demo 前言对于一些小项目，觉得没必要通过前后端分离进行部署，太浪费服务器资源了，但是用jQuery、bootstrap等又不能做到像前端框架那样能够模块化开发，因此就想着能不能用前后端分离的方式开发项目，开发完毕后把前端合并到后端去成为一个单体应用。通过查找，有人说前端开发完把编译好的文件copy到后端static目录中…太麻烦了…后来找到有个maven插件frontend-maven-plugin可以实现这个需求，于是参考了多篇博文，踩了些坑，做了这个demo，以后有这个需求来这个demo中copy代码就阔以了=。= 项目结构 vue-maven-demo ├──springboot-api └── vue-web
重点在于pom的配置 vue-maven-demo.pom父模块的配置 com.luvying vue-maven-demo pom 1.0-SNAPSHOT springboot-api vue-web 2.6.1 org.springframework.boot spring-boot-starter-parent ${spring.boot.version} import pom springboot-api子模块：后端模块的配置 vue-maven-demo com.luvying 1.0-SNAPSHOT springboot-api 0.0.1-SNAPSHOT springboot-api Demo project for Spring Boot ${project.parent.basedir}/vue-web/dist 1.8 3.1.0 3.1.0 com.luvying vue-web 1.0-SNAPSHOT org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin ${spring.boot.version} package repackage org.apache.maven.plugins maven-clean-plugin ${maven-clean-plugin} src/main/resources/static ${frontend-project-dist-dir} org.apache.maven.plugins maven-resources-plugin ${maven.resource.version} copy static generate-resources copy-resources src/main/resources/static true ${frontend-project-dist-dir} css/ fonts/ img/ js/ favicon.ico index.html vue-web子模块：前端模块的配置 vue-maven-demo com.luvying 1.0-SNAPSHOT 4.0.0 vue-web 1.12.0 v16.13.1 8.1.2 UTF-8 UTF-8 com.github.eirslett frontend-maven-plugin ${maven-frontend-plugin.version} install node and npm install-node-and-npm npm install npm generate-resources install npm run build npm run build ${maven-frontend-plugin.nodeVersion} ${maven-frontend-plugin.npmVersion} https://npm.taobao.org/mirrors/node/ https://registry.npm.taobao.org/npm/-/ 相关说明把前端代码打包进后端，主要是几个流程（结合上面的pom看更清晰）： frontend-maven-plugin下载node和npm到本地，然后将前端代码进行编译，编译完成后文件在vue-web/dist中（所以本地可以不需要有node环境也能够编译）maven-clean-plugin把后端项目中src/main/resources/static清空maven-resources-plugin去前端项目拿到vue-web/dist将它复制到后端项目src/main/resources/static中接下来的流程就和maven正常打包一样了自己的项目目录有变化的话，修改pom中相应的目录路径即可 打包时，在父模块vue-maven-demo执行maven install，生成的jar包会在springboot-api\target下而不是vue-web\target下，因为vue-web是为了编译前端文件而打了个空包而已 前端项目本文以vue为例（其他前端项目类似），用vue-cli生成了一个vue项目，简单写了获取后端数据、前端路由的例子，经测试，前端打包进后端后功能正常 前端在开发完成后要编译成静态文件合并到后端中去前后端为一整个系统，而前后端在开发时又是两个分开的系统，为了防止axios打包后无法访问后端，就需要配置开发时axios发送到后端的端口 如下图vue.confie.js配置前端8000端口，axios访问后端api为8080端口，而打包后前端合并到了后端，那么此时整个系统就是8080端口了 原来以为前端路由在打包后会出现异常，经过尝试后前端路由正常，也不用写啥了=。= 为了实现这个功能参考过一些文章，东凑凑西凑凑，有需要自取哈 https://www.cnblogs.com/LUA123/p/11189069.html https://github.com/Mysakura/boot-vue-parent https://juejin.cn/post/6978764604142780446 https://juejin.cn/post/6977316219615445022 |
前端项目结构如下 
详细见源码
【本文地址】
今日新闻 |
推荐新闻 |