vue前端代码如何通过maven打成jar包运行

 更新时间:2024年01月02日 09:42:52   作者:洋哥登陆  
这篇文章主要介绍了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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 利用Vue.js指令实现全选功能

    利用Vue.js指令实现全选功能

    最近做了两个vue的项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
    2016-09-09
  • 项目开发中husky的使用详解

    项目开发中husky的使用详解

    这篇文章主要为大家介绍了项目开发中husky的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vant中如何修改用户的头像

    vant中如何修改用户的头像

    这篇文章主要介绍了vant中如何修改用户的头像,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    下面小编就为大家分享一篇浅谈vue中改elementUI默认样式引发的static 与assets的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vuex实现购物车功能

    vuex实现购物车功能

    这篇文章主要为大家详细介绍了vuex实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    最近一直在做的项目是Vue2搭建的项目,本文主要介绍了Vue全局自定义指令Modal拖拽的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 完美解决vue引入BMapGL is not defined的问题

    完美解决vue引入BMapGL is not defined的问题

    在Vue项目中使用BMapGL时,通过在src下添加bmp.js文件并配置密钥(ak),可以有效解决地图API的应用问题,本方法是基于个人经验总结,希望能为开发者提供参考和帮助
    2024-10-10
  • 深入探索Vue3.x中的七大高级用法

    深入探索Vue3.x中的七大高级用法

    Vue3.x 自发布以来,凭借其性能的显著提升和更加灵活的组合式 API,已经成为了现代前端开发的重要工具之一,除了基本用法外,Vue3.x 还提供了许多高级功能,本文将和大家一起深入探索Vue3.x中的七大高级用法,需要的朋友可以参考下
    2024-03-03
  • mpvue 如何使用腾讯视频插件的方法

    mpvue 如何使用腾讯视频插件的方法

    这篇文章主要介绍了mpvue 如何使用腾讯视频插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue2.0+webpack环境的构造过程

    vue2.0+webpack环境的构造过程

    本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11

最新评论