龙空技术网

如何将Vue的前端项目直接集成到SpringBoot项目的Jar包中?

从程序员到架构师 1076

前言:

今天小伙伴们对“springboot获取当前项目的路径”都比较关切,兄弟们都需要分析一些“springboot获取当前项目的路径”的相关资讯。那么小编在网摘上汇集了一些有关“springboot获取当前项目的路径””的相关资讯,希望大家能喜欢,大家快快来学习一下吧!

有时候为了项目开发方便,我们会在SpringBoot项目中通过模板引擎技术来进行Web应用的开发,但是在一些用户页面交互非常美观的场景中,通过模板引擎技术,由于后端开发者的能力有限并不能很好的实现用户交互的UI操作,那么这个时候就需要用到我们的前端开发技术,但是前端开发完成之后与我们后端采用的模板引擎技术就又冲突了,为了解决这个问题,我们就来讨论,如何通过SpringBoot的静态资源代理的方式来实现将Vue代码打包到Jar中,通过内嵌服务器进行运行。

构建Vue前端项目

首先需要构建好一个Vue的项目,确保已经安装好的Node与npm工具,然后在Vue项目路径中通过如下的命令来构建前端项目。

npm run build

通过这命令就可以生成好构建之后的静态文件,那么接下来要做的事情就是将静态文件引入到SpringBoot项目中。

目录结构如下所示

vue-project/├── dist/│   ├── index.html│   ├── js/│   └── css/├── src/└── ...
配置Spring Boot项目

在构建好的SpringBoot项目的resource目录的static目录下将创建好的Vue的dist目录下的资源引入其中,这个时候SpringBoot会默认配置好静态路径的读取目录,当然我们也可以通过自定义的方式来指定静态资源的访问操作。

SpringBoot项目目录结构如下所示

spring-boot-project/├── src/│   ├── main/│   │   ├── java/│   │   ├── resources/│   │   │   ├── static/│   │   │   │   ├── index.html│   │   │   │   ├── js/│   │   │   │   └── css/│   │   │   └── application.properties│   │   └── ...│   └── ...└── ...

接下来就可以通过mvn打包的方式来对项目进行构建,构建完成之后,会在target目录下生成一个可执行的Jar包。我们就可以通过如下的操作来运行这个Jar包。

java -jar target/your-spring-boot-project.jar

然后我们就可以在浏览器中通过访问如下的连接地址来访问对应的Vue应用,这里需要注意,由于Vue项目调用的内部接口也是属于当前项目的,虽然文件是在Jar包中,但是接口调用是需要另外进行配置的,这一点与模板引擎项目有所不同。

标签: #springboot获取当前项目的路径