vue前端代码如何通过maven打成jar包运行
vue前端代码生成jar包执行
业务开发需求,需要将vue前端代码通过jar包启动。
当前项目是springcloud微服务模式,创建了一个新的module做得。
个人认为springboot下也可以操作。
结果:打成的jar包内包含vue前端代码,通过java -jar命令直接启动,即可访问前端页面。
1.新建module项目
项目工程结构如下:

一定要配置WebApplication作为入口类,前端dist包打成jar包后是没有启动入口类的,所以一定要有启动类。

2.pom.xml
// 有web就可以了
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
// 个人使用的maven打包插件
<build>
<finalName>zsddweb</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<configuration>
<skipTests>true</skipTests>
</configuration>
</plugin>
</plugins>
</build>
3.application.yml文件
server: port: 8005 spring: application: name: zsddweb
4.vue生成的dist包
!!vue的生产环境一定要配置自己本地的ip和后端的服务端口
vue正常打dist包即可。

5.生成jar包
将vue项目打包后的dist文件夹中的放到resource的static中

将web直接install打包,生成的jar包通过 java -jar ** 启动


6.访问index.html
localhost:配置的端口/index.html

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码
这篇文章主要介绍了vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考借鉴价值,需要的朋友参考下吧2024-01-01
vue中input标签上传本地文件或图片后获取完整路径的解决方法
本文给大家介绍vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg,本文给大家分享完美解决方案,感兴趣的朋友跟随小编一起看看吧2023-04-04
Vue+element 解决浏览器自动填充记住的账号密码问题
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中,如何实现此功能呢,下面小编给大家介绍下,感兴趣的朋友一起看看吧2019-06-06
在vue中使用el-tab-pane v-show/v-if无效的解决
这篇文章主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)
最近在项目中要做一个pdf在线预览的功能,索性给大家整理个全面的,这篇文章主要给大家介绍了关于vue项目中常见的三种文件类型在线预览实现的相关资料,文件类型分别是pdf/word文件/excel表格,需要的朋友可以参考下2022-05-05


最新评论