SpringBoot与Vue项目整合打包

2022-11-17 13:02| 来源: 网络整理| 查看: 265

最近在公司项目需要做前端优化，项目是一个比老的项目，前端使用的是easyui后端用的是spring mvc。目前后端已经把代码迁移到spring-boot框架。但前端一直还是用的easyui，由于当前vue比较火爆，于是尝试用vue进行前端界面优化。本人之前有过使用vue的经验，这个任务就交到我身上了（我太难了。。）主流的使用vue的方式是使用前后端分离的方式，即后端用微服务架构，前端用nginx作为web服务器。但由于项目团队前端力量薄弱，所以我采用了一种维护成本较低的方式，即开发的时候使用前后端分离开发，但打包阶段把前端代码和后端代码整合到一个包中部署。这样无需额外再安装nginx服务，最后只需部署springboot的项目即可。

这里有两种方式，可以实现这个功能。在前端打包到后端工程之前，还需要把后端项目先配置好。SpringBoot对于前端UI是支持多种模板引擎的。但由于前端工程打包之后的文件是html文件，所以SpringBoot工程只能配置基于html文件的模板引擎，这里我使用官方推荐的thymeleaf模板引擎。

SpringBoot项目配置

通过官方网站初始化SpringBoot工程，在pom.xml中加入thymeleaf模板引擎依赖，同时还需要加入html5文件的非严格检查依赖，同时在application.yml中加入必要的配置，不然浏览器可能会报错，具体配置如下

org.springframework.boot spring-boot-starter-thymeleaf net.sourceforge.nekohtml nekohtml 1.9.22

application.xml的配置如下

server: port: 8090 spring: # templates 模板引擎配置 thymeleaf: mode: LEGACYHTML5 # 不进未关闭标签检查，需配合nekohtml使用 encoding: UTF-8 cache: false # 关闭缓存 prefix: classpath:/templates/ suffix: .html

工程创建完成后，目录结构如下。其中resources下的templates就是前端代码的文件路径。下面还有一个static目录，这其实是vue打包完成后的文件目录。vue打包完成的文件名就叫static，这里是原封不动的放在了templates目录下。因此这里还需要一个额外的操作，不然前端可能无法访问static下的静态文件。

vue打包完成后是以static作为根路径去加载 js和css文件的，所以需要对static里面的文件做一次映射，把templates/static/目录映射成/static目录，对应的SpringBoot配置类如下

package com.lsj.config; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.util.ResourceUtils; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration @EnableWebMvc @ComponentScan public class InterceptorConfig implements WebMvcConfigurer { /** * 静态文件映射 * addResourceHandler指的是对外暴露的访问路径，addResourceLocations指的是文件放置的目录 * 映射之后，Controller返回到 html ，使用映射后的路径 * 如下将 static 下的静态文件映射到根路径下， * 文件实际路径 /static/semantic/semantic.min.js 映射之后 * 在 html 中就可以通过 semantic/semantic.min.js 路径访问静态文件 * * 也可映射绝对路径,例如下面注释，把D盘static中的静态文件，映射到项目根路径下 * */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/templates/static/"); } }

到这里后端工程准备完毕，下面用前端工程来搞点事情吧。把前端工程的代码整合到后端工程中，这里有两种方式，第一种简单粗暴但不适合自动化部署，第二种比较复杂些，但是可以通过maven一键打包。

方式一

前端开发好后将build构建好的dist下的文件拷贝到springboot的resources的static下。操作步骤：前端vue项目使用命令 npm run build 或者 cnpm run build 打包生成dist文件，在springboot项目中resources下建立static文件夹，将dist文件中的文件复制到static中，然后去application中跑起来boot项目，这样直接访问index.html就可以访问到页面（api接口请求地址自己根据情况打包时配置或者在生成的dist文件中config文件夹中的index.js中配置）

这是vue前端工程的目录结构，使用npm打包后会生成dist目录。我们需要把dist目前下的全部文件都拷贝到后端SpringBoot工程中resources目录的templates目前下。然后启动前端工程就可以了。这是最简单的方式，但是如果作为工程级的项目开发，并不推荐使用手工合并。下面是第二种方式

方式二

为了前后端代码分离开发，这里我创建了两个独立的工程，一个后端工程和一个前端工程，然后两个工程通过maven聚合组成一个工程。最终工程的目录结构如下

具体的pom.xml的配置如下

vue-element-demo spring-boot-demo com.lsj spring-vue-parent 1.0-SNAPSHOT ../ com.lsj spring-vue-parent 1.0-SNAPSHOT ../

然后在vue工程中就不再直接使用npm打包了，而是通过maven调用npm的打包命令。vue工程pom.xml的关键的配置

org.codehaus.mojo exec-maven-plugin 1.6.0 exec-npm-install package exec npm install ${basedir} exec-npm-run-build package exec npm run build ${basedir}

SpringBoot工程pom.xml关键配置

org.springframework.boot spring-boot-maven-plugin com.lsj.StartApplication repackage org.apache.maven.plugins maven-resources-plugin ${maven.resource.version} copy-static validate copy-resources src/main/resources/templates true ../vue-element-demo/dist

父工程中配置编译插件

org.apache.maven.plugins maven-compiler-plugin ${maven.compiler.version} ${java.source.version} ${java.target.version} ${file.encoding}

最终只需要执行父工程的打包命令，即可将前后端整体打包成一个jar包。部署时只需部署这个jar包就行了

【本文地址】

公司简介

联系我们