把vue打包到springboot的jar下运行

最新推荐文章于 2024-04-23 18:52:22 发布
最新推荐文章于 2024-04-23 18:52:22 发布
阅读量2.2k 收藏 7
点赞数 1
文章标签： java vue jar springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaovirus/article/details/114087352
版权

业务场景：

1github下载的项目，前后端分离，前端一个项目，后端一个项目，前端是vue，后端是springboot。

2由于服务器权限问题，不允许讲vue放到nginx下

解决办法

1把vue编译后的静态文件放到springboot项目的resources下面，即将index.html放到resources/templates下面，将static下面的文件放到resources/static下

2springboot打包jar，运行成功

3出现问题，页面打不开，查看问题，请求不到static下的文件

4观察发现，请求目录为ip:端口/static/js/xxx.js，请求不到，如果请求ip:端口/js/xxx.js的话，可以请求到

5问题解决，把vue的整个static文件夹放到springboot的static下面，目录结构成了resources/static/static/js/xxx.js,如下图

6问题解决

yaovirus
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot 兼容映射 vue jsp
05-17
springboot 兼容jsp、vue，并以jar方式打包部署 1.pom --jsp配置、webapp资源配置 2.vue编译打包路径配置 参见 vue配置.md 3.WebMvcConfig路由映射配置 4.项目结构 5.另: 诡异：顺序变了，jsp直接以源码方式返回给前端 src/main/webapp <!--注意此次必须要放在此目录下才能被访问到--> META-INF/resources **/** src/main/resources src/main/java **/*.xml
Springboot+Vue项目打包成jar的配置
qq_39540108的博客
07-24 2630
Springboot+Vue项目打包成jar的配置
若依打包将vue放到.jar里面部署
wangwei的博客
12-14 595
1.vue静态文件，以及单页面。
基于SpringBoot和Vue的单体架构在线投票系统设计源码
04-15
基于SpringBoot和Vue的单体架构在线投票系统设计源码，该项目包含174个文件，主要文件类型有114个xml配置文件，46个java源文件，以及4个Markdown文档用于项目说明。此外，还包括3个gitignore文件用于版本控制，2个properties配置文件，1个iml项目文件，1个jar打包文件，以及1个vote/mvnw构建文件和1个cmd批处理文件。该项目是一个基于SpringBoot和Vue的单体架构在线投票系统，可能涉及用户界面设计、应用逻辑实现、数据存储等多个方面。
基于Springboot和Vue的高校学生学籍管理系统设计源码
04-06
本资源提供了一套基于Springboot和Vue的高校学生学籍管理系统的设计源码，包含747个文件，其中包括163个HTML页面文件，133个CSS样式文件，以及118个PNG图片文件。此外，还包括80个JAR打包文件，79个JavaScript脚本文件，以及38个Java字节码文件。这些文件详细展示了如何使用Springboot、Vue、HTML、CSS和Java构建一个高校学生学籍管理系统，该系统具有三种角色：管理员、教师和学生，并提供了学生管理、老师、课程管理、班级管理和统计分析等功能。这些文件非常适合用于学习和参考Java项目的开发。
Spring Boot（十）之Springboot后台和前端一起打包部署发布
热门推荐
子时不睡的博客
05-09 2万+
Springboot和前端一起打包发布（1）引入模板引擎依赖（2）将前端代码复制到Springboot项目resource资源下（3）创建Controller控制器类（4）打包发布 因为后台使用SpringBoot框架本身内嵌了Tomcat，并且我自己在新建项目的时候是以打成jar包的方式创建的。所以只需要最后运行jar包即可。 （1）引入模板引擎依赖 在pom.xml文件引入thymeleaf模板引擎依赖 <dependency> <groupId>org.sp
前后端分离开发，前端打包后放springboot的static文件夹部署
keller的博客
06-29 6099
今天，小编在公司部署项目，要求前后端部署在一起，前端开发完后将前端代码打包后放到springboot的static目录下；然后打成镜像，k8s部署；前端项目执行npm run build命令，文件会打包到dist文件夹下；后端项目 在项目的resource目录下，创建static文件夹，如下所示： 将前端打包后的dist下的所有文件，全部拷贝到static文件夹下；通过这样部署后，相当于前后端作为一个整体部署到了tomcat当中，所以前后端使用同一个端口；启动springboot工程，然后访问localh
SringBoot前后端分离项目部署
一名蒟蒻的博客
12-03 1913
SringBoot前后端分离项目部署 1、方法一：前端项目放入Springboot项目部署 把前端项目打包 npm run build 把打包的dist目录下的文件放入SpringBoot的resources下的static文件夹下 用IDEA的Maven clear 和package 把target包下的jar包放入虚拟机中 启动项目 nohup java -jar + jar包名.jar > console.log 2>&1 & --启动进程
记一次vue-cli前端项目打包到spring boot生成jar包，生成软件安装包的过程
qq_15054679的博客
06-03 3800
记一次vue-cli前端项目打包到spring boot生成jar包，生成软件安装包的过程1、vue打包之前的配置2、前后端合并3、生成jar包4、使用exe4j生成exe文件5、打开exe4j5、使用Inno Setup Compiler生成安装包6、exe4j和Inno Setup Compiler安装包下载7、参考 1、vue打包之前的配置 在工程的config目录下的index.js文件配...
SpringBoot整合VUE源码打包成jar部署——解决步骤和踩坑记录
qq_33388068的博客
09-20 8149
一、前言 项目是前后端分离的springboot+vue，之前都是前后端分开部署的，前端打成dist，后端打成war包部署到tomcat。突然项目来个需求，需要将前端的vue整合到后端的springboot打包成jar包部署，才疏学浅一时间不知如何处理，只能网上找各种资料。期间踩了很多坑，总算是解决了。 二、解决的步骤 1、首先vue打成dist包，发给后端的我，我把这个包放在resources的static目录下，目录结构如下 2、配置拦截器，映射静态资源，这里有两种方法，第一种可以继承.
项目部署 – Linux（ springboot + vue + nginx）
01-09
一、后台项目（Springboot） 1.项目打成jar包 在项目target目录里会有打包的jar 2.启动后台运行jar 注意： 若无nohup 命令 yum install coreutils nohup java -jar 你的jar包名称.jar & 二、前端工程 1.点击此按钮进行打包 丢到服务器上去 三、配置nginx 前端工程 和后台api接口转发 server { listen 80; server_name 你自己的IP; #前端页面 location / { #Linux上
基于SpringBoot和Vue的教务选课管理系统设计源码
04-17
本项目是基于SpringBoot和Vue开发的教务选课管理系统设计源码，主要使用Java进行开发。项目共包含71个文件，其中Java源代码文件24个，编译后的Java字节码文件24个，XML配置文件16个，Markdown文档文件2个，YAML配置文件2个，Git忽略配置文件1个，JAR打包文件1个，以及Properties配置文件1个。该系统是一个前后端分离的选课管理系统，提供了管理员、学生和教师三个角色的功能，包括学生管理、教师管理、成绩管理、课程管理、选课、退课和查看成绩等。项目结构清晰，代码注释详尽，适合用于学习和研究SpringBoot和Vue在教务选课管理系统开发中的应用。
springboot vue整合成jar包方案
Smile yourlife
12-01 2910
首先先将vue项目进行打包，生成dist，如下： sringboot版本在2以下的需要配置拦截器指定到static，引用静态资源文件； sringboot版本在2以上的，可以直接将dist文件下的所有复制到后端项目下的static目录下，如图： 直接启动即可访问！ 需要注意几个点： 1.前端访问后端的ip需要指定正确； 2.前端中config/index.js 中的 assetsPublicPath 为’/’，如果写成’./’，打包后的几个文件路径会匹配不上； 3.router/index.js中的
springboot 打包前端vue到jar
我是老A
11-29 618
前端代码执行 npm run build 把生成的dist文件放到java的resource/static目录下 3.后台yml文件配置web页面路径 4.编写访问controller 5.注意修改前端vue访问后台路由地址
前端打包项目dist导入SpringBoot打开显示不出静态页面资源
weixin_47158583的博客
12-12 1533
spring.mvc.static-path-pattern 与 spring.web.resources.static-locations
vue+springboot项目部署
qq_44660367的博客
10-02 313
Vue项目部署 1、压缩项目 压缩好后传到服务器上并解压，传输压缩包防止文件损坏。 2、安装前端项目依赖 npm install --unsafe-perm --registry=https://registry.npm.taobao.org 3、打包项目 npm run build 同时也可以打生产环境包以及运行环境包，如果报错的话，看下自己的package.json文件中是不是没有配置该打包方式。 打包完成后会产生一个dist文件夹，将文件夹 复制到上层目录一份，防止丢失。 4、配置nginx ng
vue+springboot打包发布
沐雨云楼
10-08 8343
前面介绍过感觉vue和springboot的几篇文章，当一个项目做完了后，就该打包发布了。本节就研究下打包发布。 vue element admin开发 vue+springboot分页交互 项目使用的技术： 开发工具: idea 前端: 使用vue element admin改造的 后端：springboot、mysql、jpa 打包手段: maven 插件 结果图： 1.打包原理 前后端分离，先看下如何分别打包。 vue前端打包，可以通过package.json里提供的命令。如：npm ru
vue打包整合到springboot
qq_42126105的博客
08-10 1116
vue-cli打包整合到springboot遇到的问题。
mybatisPlus使用MetaObjectHandler对字段进行更新
最新发布
m0_56356631的博客
04-23 256
都是符合我们的预期的。
使用 frontend-maven-lugin 打包 vue 成 jar 给 springboot 项目引用
07-16
要将Vue应用打包成jar，并在Spring Boot项目中引用，您可以使用frontend-maven-plugin插件来执行这个任务。下面是一些步骤可以帮助您实现这个目标： 1. 在您的Vue项目根目录下创建一个`pom.xml`文件，并添加以下配置： ```xml <build> <plugins> <!-- frontend-maven-plugin配置 --> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.12.0</version> <executions> <!-- 安装 Node.js 和 NPM --> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v14.17.3</nodeVersion> <npmVersion>6.14.13</npmVersion> </configuration> </execution> <!-- 安装 Vue 依赖 --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> </configuration> </execution> <!-- 执行 Vue 打包 --> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build> ``` 请注意，您需要根据您的项目需求调整`nodeVersion`和`npmVersion`的版本号。 2. 打开终端并导航到您的Vue项目根目录，运行以下命令将Vue应用打包： ```shell mvn clean install ``` 这个命令将触发frontend-maven-plugin插件的执行，它将安装Node.js和NPM，安装Vue依赖，并执行Vue打包。 3. 打包成功后，您将在`target`目录下找到生成的jar文件。将该jar文件复制到您的Spring Boot项目中，并将其作为依赖添加到Spring Boot项目的`pom.xml`文件中。 ```xml <dependency> <groupId>your.groupId</groupId> <artifactId>your-artifactId</artifactId> <version>your-version</version> <scope>runtime</scope> </dependency> ``` 请记得将`your.groupId`、`your-artifactId`和`your-version`替换为您实际的值。 4. 在Spring Boot项目中，您可以使用`org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration`类中的`addResourceHandlers()`方法来配置静态资源的处理。添加以下代码： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/**") .addResourceLocations("classpath:/static/") .setCachePeriod(0); } } ``` 这将使Spring Boot能够正确地处理静态资源路径。 现在，您可以重新构建并运行Spring Boot项目，Vue应用将作为静态资源打包在jar中，并能够在Spring Boot应用中访问。 请注意，这只是一种将Vue应用打包成jar并在Spring Boot项目中引用的方法。根据您的具体需求和项目结构，可能需要进行一些调整和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值