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

最新推荐文章于 2024-10-10 11:17:19 发布

洋哥登陆

最新推荐文章于 2024-10-10 11:17:19 发布

阅读量7.6k

点赞数 14

分类专栏： vue 文章标签： jar vue java

本文链接：https://blog.csdn.net/Peanutfight/article/details/113062891

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何将Vue前端项目与SpringBoot结合，打包成jar文件并直接运行。通过在SpringBoot项目中引入Vue的dist包，配置相关依赖和启动类，然后打包，最终实现通过java -jar命令启动前端页面。关键步骤包括设置pom.xml，配置application.yml，放置Vue的dist静态资源，以及正确打包和启动。

摘要由CSDN通过智能技术生成

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
在这里插入图片描述