vue加springboot项目结合打成一个jar包 前后端分离项目部署

最新推荐文章于 2024-05-28 10:23:47 发布
最新推荐文章于 2024-05-28 10:23:47 发布
阅读量2.3k 收藏 13
点赞数 4
分类专栏： web前端 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51751186/article/details/124351635
版权

文章目录

前言

如何部署vue和springboot项目到服务器呢？

一、编译vue项目

切换到你前端对应的目录下

使用命令 npm run bulid

我这里vue前端文件在before
在这里插入图片描述
build好的目录下会多一个dist
在这里插入图片描述

二、把前段编译好的dist文件夹下的内容粘贴到后端并对其进行打包

注意是dist文件夹下的内容
注意是dist文件夹下的内容
在这里插入图片描述
接着来到你的后端目录
在这里插入图片描述
然后运行你的maven执行package命令
在这里插入图片描述
接着在你后端的targer下获取jar包
在这里插入图片描述
cmd 窗口 java -jar 你的jar包名称
测试运行

qwecxzz
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Docker部署SpringBoot+Vue前后端分离项目
02-14
前后端项目和配置文件
如何把vuejs打包出来的文件整合到springboot里
10-18
主要介绍了如何把vuejs打包出来的文件整合到springboot里,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
springboot+vue前后端分离项目打包成jar包及运行
weixin_56851586的博客
05-03 5615
完成上述配置后，重新执行 mvn package 命令打包，如果打包成功，会在 target 目录下生成带有可执行 JAR 的主启动类的 service_staff-0.0.1-SNAPSHOT.jar 文件。当构建完成后，在 Spring Boot 项目的 target 目录中就会生成一个名为 xxx.jar 的可执行的 jar 包。你可以在 Maven 的 pom.xml 文件中，使用 maven-jar-plugin 插件来配置可执行 JAR 的主启动类。
Vue+springBoot项目打jar包运行及静态资源访问net::ERR_FILE_NOT_FOUND的解决办法
aloneno的博客
04-27 6294
Vue+Springboot项目打jar包运行 最近开始接触了前后端分离的项目，前端使用的Vue，后端使用的Springboot，数据库使用的mongo，开始时在自己本地分别 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码...
vue打包部署到springboot并生成war包
最新发布
u014694915的博客
05-28 1204
项目是基于前后端分离的仓库管理系统后端前端。
SpringBoot整合VUE源码打包成jar部署——解决步骤和踩坑记录
qq_33388068的博客
09-20 9266
一、前言 项目是前后端分离的springboot+vue，之前都是前后端分开部署的，前端打成dist，后端打成war包部署到tomcat。突然项目来个需求，需要将前端的vue整合到后端的springboot打包成jar包部署，才疏学浅一时间不知如何处理，只能网上找各种资料。期间踩了很多坑，总算是解决了。 二、解决的步骤 1、首先vue打成dist包，发给后端的我，我把这个包放在resources的static目录下，目录结构如下 2、配置拦截器，映射静态资源，这里有两种方法，第一种可以继承.
SpringBoot+Vue项目打jar包
Answer0902的博客
08-06 2509
vue搭建脚手架报错：rollbackFailedOptinal:verb npm-session解决
SpringBoot和VUE前后端合并自动打包成jar
tmd
10-18 3874
通过maven管理，将前后端分离两个项目合并打包成一个jar，成为一个单体项目。springboot在install或者package打包时，调动vue打包，vue自动install和build，将生成的dist复制到spring boot后端的resources下，完成合并打包。1、在items-vue前端项目下新建pom.xml，无需添加标签配置，新建完成选中pom右击add到maven。项目目录有变，修改pom中相应的目录路径。2、 配置items-springBoot后端pom。
linux java -jar部署springclound 前后端分离nginx配置 Nginx区分路径部署多个Vue项目
qq_38144121的博客
09-07 708
不使用容器运行springcound服务 1.启动使用命令 nohup java -jar eureka.jar >log/eureka.log 2>&1 eureka.jar运行的一切日志都会打印到eureka.log文件下，最后的&,保障即使关闭命令窗口、退出连接，该jar包也能在服务器上跑起来…直到你主动关闭它。 2.查看进程 ps aux|grep eureka.jar 3.查看日志 tail -200f eureka.log 查看eureka.log最近2
历时3天的springboot+vue打包成jar包
weixin_56851586的博客
09-01 559
有人说问什么打包花了三天，里面的坑很多，我就先不叙述太多，直接说我搞了三天得出来的最后解决方案，不一定适合每一个人！
部署vue+Springboot前后端分离项目的步骤实现
10-15
本文将详细介绍如何部署一个Vue+SpringBoot的前后端分离项目。 首先，我们从单页应用（SPA）的概念开始。SPA是指在浏览器加载初始HTML页面后，所有后续交互都通过Ajax或其他异步技术进行，无需重新加载整个页面。...
SpringBoot+Vue教务管理系统前后端分离项目，包含数据库脚本文件.zip
06-01
《SpringBoot+Vue 教务管理系统前后端分离实践详解》 在现代的Web开发中，前后端分离已经成为一种主流架构模式。本项目“SpringBoot+Vue教务管理系统”充分利用了这种模式的优势，结合了SpringBoot的强大后端能力与...
Springboot项目与vue项目整合打包的实现方式
08-25
主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue加springboot前后端分离架构.zip
09-30
百分百完善的vue+springboot前后端分离架构，可直接拿去做前后端分离项目的底层架构，包含3个部分，应用springboot框架的java后端代码，vue前端代码，mysql数据库脚本，已完成反向代理，跨域，数据库连接等基础参数...
一个Vue+springboot前后端分离的微社区项目源码.zip
05-10
一个Vue+springboot前后端分离的微社区项目源码 一个Vue+springboot前后端分离的微社区项目源码 一个Vue+springboot前后端分离的微社区项目源码 一个Vue+springboot前后端分离的微社区项目源码 一个Vue+...
前后端项目打包成一个jar部署
qwertyu1234567g的博客
02-01 1006
org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport重写addResourceHandlers方法，具体如下。6. 注意次吃是否需要更改，更改index.html 中 4.前端 vue或angular项目打包后资源放到resources/pages/目录下。前后端分离项目，在实际交付时会遇到怎样一个包交付，现总结如下。3.新增配置类，防止页面F5刷新时，找不到页面。
vue + springboot 打包成一个.jar
qq_56660301的博客
11-20 1497
想要整合它们，首先打包完的vue的index.html可以直接打开1.ruoter的路由要设置好,修改路由文件，ruoter里的index.js2.修改配置文件vue.config.js3.修改完以后就可以进行打包了npm run build会生成一个dist文件夹，直接打开里面的index.html,可以显示内容就成功了。前端在vue.config.js写跨域打包后会不生效。建议后端写跨域。
SpringBoot和VUE源码直接整合打包成jar---采坑记录
生命的意义在于创造和毁灭
09-29 9599
一、前言 spring boot是要打成jar包运行的，项目采用了前（VUE）后（SpringBoot）端完全分离，开发完成后需要整合到一起发布，这就要引出这篇博客的由来了；一开始的时候是前端VUE开发完成后打成dist包然后发给我（前后端不在一起开发），我拿到dist包后解压然后放到springboot的static目录下。然后将项目打成jar包。最后部署，一次两次没问题，但是如果是联调阶段，前...
ruoyi-vue前后端分离项目实现一体化打包（前后端合并打包）
weixin_43860634的博客
06-26 5216
ruoyi-vue前后端分离项目实现一体化打包（前后端合并打包）
云服务器Docker部署Vue+SpringBoot前后端分离项目详细教程
07-16
当然，我可以为您提供一个详细教程来帮助您部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。 首先，确保您已经完成以下准备工作： - 注册一个云服务提供商的账号，并创建一个云服务器实例。 - 在本地环境中安装了Docker，并熟悉Docker的基本操作。 - 本地已经安装了Node.js和npm，以及Vue CLI和Java开发环境。 以下是详细的步骤： 1. 登录到云服务器： 使用SSH工具连接到您的云服务器。例如，使用命令行工具执行以下命令： ``` ssh username@server_ip_address ``` 2. 安装Docker： 根据您的云服务器的操作系统，选择对应的安装方式进行Docker安装。以下是一些常见操作系统的安装命令： - Ubuntu: ``` sudo apt-get update sudo apt-get install docker.io ``` - CentOS: ``` sudo yum update sudo yum install docker ``` 3. 验证Docker安装是否成功： 执行以下命令来验证Docker是否已经成功安装： ``` docker version ``` 4. 构建Vue项目： 在本地开发环境中，使用Vue CLI创建Vue项目，并进行开发和测试。确保项目可以正常运行。 ``` vue create myproject cd myproject npm run serve ``` 5. 打包Vue项目： 在Vue项目根目录下执行以下命令，将Vue项目打包成静态文件。 ``` npm run build ``` 6. 创建SpringBoot项目： 使用Spring Initializr创建SpringBoot项目，并进行开发和测试。确保项目可以正常运行。 - 访问Spring Initializr网站：https://start.spring.io/ - 选择项目的基本设置，如使用的编程语言、构建工具、Spring Boot版本等。 - 添加所需的依赖项，如Spring Web、Spring Data JPA等。 - 点击"Generate"按钮下载生成的SpringBoot项目压缩包。 - 解压缩项目压缩包，并使用您喜欢的集成开发环境（IDE）打开项目。 7. 创建Dockerfile： 在SpringBoot项目的根目录下创建一个名为`Dockerfile`的文件，用于定义Docker镜像的构建步骤。在`Dockerfile`中添加以下内容： ``` FROM openjdk:8-jdk-alpine VOLUME /tmp ADD target/myproject.jar app.jar ENTRYPOINT ["java", "-jar", "/app.jar"] ``` 8. 构建Docker镜像： 在SpringBoot项目的根目录下执行以下命令，构建Docker镜像： ``` docker build -t myproject . ``` 9. 运行Docker容器： 执行以下命令，在Docker中运行SpringBoot项目的Docker容器： ``` docker run -d -p 80:8080 myproject ``` 10. 访问应用： 使用浏览器访问您的云服务器的公网IP地址，即可查看部署好的前后端分离项目。 希望这个详细教程能够帮助您成功部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。如果您有任何问题，请随时提问！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qwecxzz

鸡腿

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值