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 图片路径 “@/assets“ 报错问题及解决

    vue 图片路径 “@/assets“ 报错问题及解决

    这篇文章主要介绍了vue 图片路径 “@/assets“ 报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 浅谈Vuex的状态管理(全家桶)

    浅谈Vuex的状态管理(全家桶)

    本篇文章主要介绍了浅谈Vuex状态管理(全家桶),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue3中的defineExpose使用示例教程

    vue3中的defineExpose使用示例教程

    这篇文章主要介绍了vue3中的defineExpose使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 如何在 ant 的table中实现图片的渲染操作

    如何在 ant 的table中实现图片的渲染操作

    这篇文章主要介绍了如何在 ant 的table中实现图片的渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 一文详解Vue 的双端 diff 算法

    一文详解Vue 的双端 diff 算法

    这篇文章主要介绍了一文详解Vue 的双端 diff 算法,diff 算法是渲染器中最复杂的部分,也是面试的热点问题。今天我们就通过 Vue 的 diff 算法来探究下diff 算法吧
    2022-06-06
  • vue与django集成打包的实现方法

    vue与django集成打包的实现方法

    这篇文章主要介绍了vue与django集成打包的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue动态添加表单validateField验证功能实现

    vue动态添加表单validateField验证功能实现

    这篇文章主要介绍了vue动态添加表单validateField验证功能实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue中使用极验验证码的方法(附demo)

    vue中使用极验验证码的方法(附demo)

    这篇文章主要介绍了vue中使用极验验证码的方法(附demo)本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue mvvm数据响应实现

    vue mvvm数据响应实现

    这篇文章主要介绍了vue mvvm数据响应实现的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • vue路由守卫+登录态管理实例分析

    vue路由守卫+登录态管理实例分析

    这篇文章主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下
    2019-05-05

最新评论