SpringBoot+Vue 博客系统（十三）：项目打包部署到服务器

已于 2023-12-01 11:08:16 修改
阅读量289 收藏 1
点赞数
分类专栏： YangCunle`s Blog 文章标签： spring boot vue.js 服务器
于 2023-06-06 10:55:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YangCunle/article/details/131063072
版权
该系列文章详细介绍了如何使用SpringBoot和Vue搭建个人博客系统，包括从项目由来到设计、开发、整合阿里云存储和Redis，再到前端Vue项目构建、跨域处理、路由设置以及后台管理。最后，文章提供了前后端分别部署到阿里云服务器的步骤，包括项目打包、上传、启动服务等。
摘要由CSDN通过智能技术生成

签名：但行好事，莫问前程。

SpringBoot+Vue 博客系统（连载系列）

在这里插入图片描述

YangCunle`s Blog 博客网址：http://www.yangcunle.com

SpringBoot+Vue 博客系统（一）：个人网站的由来

SpringBoot+Vue 博客系统（二）：个人博客的搭建

SpringBoot+Vue 博客系统（三）：个人博客的设计

SpringBoot+Vue 博客系统（四）：博客后端开发

SpringBoot+Vue 博客系统（五）：整合阿里云OSS

SpringBoot+Vue 博客系统（六）：整合Redis

SpringBoot+Vue 博客系统（七）：Blog前端Vue项目的搭建

SpringBoot+Vue 博客系统（八）：前端项目引入Element-UI

SpringBoot+Vue 博客系统（九）：安装Axios处理跨域

SpringBoot+Vue 博客系统（十）：VUE路由 vue-route

SpringBoot+Vue 博客系统（十一）：博客后台管理

SpringBoot+Vue 博客系统（十二）：博客前台展示

SpringBoot+Vue 博客系统（十三）：项目打包部署到服务器

文章目录

前言

前后端分别部署到阿里云服务器，实现域名访问网站：www.yangcunle.com

一、后端

1、项目打包成jar包

在这里插入图片描述

2、上传到阿里云服务器

在这里插入图片描述

3、启动后端jar包

nohup java -jar xxxx.jar &

二、前端

1、构建前端项目

在这里插入图片描述

npm run build

2、将dist文件上传到阿里云服务器

在这里插入图片描述

3、启动nginx即可访问

在这里插入图片描述

总结

只要稍微会一些linux命令，部署项目还是很简答的，如果对你有所帮助，请一键三连。

杨存乐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Springboot项目与vue项目整合打包的实现方式
08-25
主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Springboot项目与vue项目整合打包
DQ2015的博客
11-08 1819
我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离，部署时合并？ 在一些公司，部署实施人员的技术无法和互联网公司的运维团队相比，由于各种不定的环境也无法做到自动构建，容器化部署等。因此在这种情况下尽量减少部署时的服务软件需求，打出的包数量也尽量少。针对这种情况这里采用的在开发中做到前后端独立开发，打包时在后端sprin...
SpringBoot+Vue项目的打包部署教程
最新发布
m0_74105684的博客
07-12 1193
本教程旨在帮助开发者，完成基于springboot后端项目和基于vue前端项目的打包以及服务器部署。本教程的前提是开发者已经拥有一个完整的springboot+vue的前后端分离的项目，以及一台配置好JDK和MySQL以及nginx的环境的云服务器。目标是能够将项目部署到云服务器上，并通过云服务器的IP访问项目。
Java Spring Cloud项目 打包部署到云服务器
weixin_58639087的博客
12-31 1093
把你idea项目停掉 看nocas 项目启动了 我这个云服务器 打包项目多了有点顶不住就只打包了两个。打包的时候 我云服务器内存不大 顶不住几个项目 所以每有全打包部署 项目多了云服务器会崩掉的。vue项目测试一下localhost 改成你的 云服务器ip 端口号改成你项目的那个端口号。（加&是因为不止一个项目 ，不加&的只能启动一个， 所以需要加&）我直接9000-10000放了 18080是我的网关的。普通工程 是你需要打包 不是所有项目都需要的。2.普通工程 （你需要打包的项目 ）
springBoot+vue项目打包
12-29 662
1.前台打包地址："root": "http://192.168.1.133:8080/bj-s-hei"（目标路径地址） 2.后台 export成war包。 3.前台改变json.地址，删除dist目录，运行npm run build 4.讲dist目录下的两个文件复制到tomcat下的bj...
spring boot项目和vue一起放在tomcat部署
11-13
spring boot项目和vue一起放在tomcat部署,spring boot项目和vue一起放在tomcat部署
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
01-09
给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的，我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统，在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 ...
springboot+vue开发的项目管理系统源码.zip
03-14
《基于SpringBoot+Vue的项目管理系统源码解析》 在当今快速发展的信息技术领域，SpringBoot和Vue.js已经成为构建高效、轻量级Web应用的首选框架。本篇文章将深入解析一个基于SpringBoot+Vue的项目管理系统的源码，...
基于SpringBoot+Vue的前后端分离仓储管理系统设计与实现
11-29
部署时，可以将SpringBoot应用打包成WAR或JAR文件，部署到如Tomcat、Jetty等服务器，前端资源则可部署至CDN或静态服务器。 通过以上关键技术的综合运用，"基于SpringBoot+Vue的前后端分离仓储管理系统"得以实现，为...
springboot＋vue实战（音乐网站）
07-03
7. **部署上线**：最后，将项目打包，部署到服务器，使其可以供用户在线访问。 这个实战项目将全面涵盖SpringBoot和Vue.js的相关技术，对于提升开发者在Web开发中的技能具有极大的帮助。无论是作为大作业还是毕业...
springboot+vue项目部署
zerolea的博客
06-26 242
springboot+vue部署
Spring Boot 和vue 项目整合打包
weixin_46091401的博客
06-23 750
String Boot 和vue 项目整合打包遇到的坑前端所需修改后端所需修改 先吐槽下某商大学不给开放端口 ，非要整合打包虽然说为安全考虑- -实属恶心人，学校给的教程以及某度给的教程都不完善。 前端所需修改 前端打包 注意修改配置目录config-index.js文件 修改build配置中的信息 修改assetsPublicPath为打包后的项目名称 某度上都是说改成“./” 反正我试过没啥用。 还有一些请求的地址头部与后台一致， 后端所需修改 在配置目录resources下创建static文件
SpringBoot项目打包，Vue项目打包
qq_34471241的博客
03-04 107
springboot项目打包 maven右侧按钮 Lifecycle-》package-》 右键-》run maven build ，打包生成的文件在 target文件夹内 Vue项目打包 到项目所在文件夹进入控制台输入 ，打包生成的文件在dist文件夹内 npm run build ...
springboot-vue项目打包部署上线
StephenCurryy的博客
10-31 214
springboot-vue项目打包部署上线
将Spring Boot 项目和Vue 项目打包成一个可运行的项目
zengliguang的专栏
04-15 1127
如果想一次性打包完成，可以在 Spring Boot 项目的 src/main 下建立一个 webapp 文件夹，然后将前端项目的源文件复制到该文件夹下，使用 maven 命令执行本地 node 打包命令。这样就可以在执行mvn clean package命令时，利用 maven 插件执行cnpm run build命令，一次性完成整个过程。2. 在 Spring Boot 项目中 resources 下建立 static 文件夹，将 dist 文件中的文件复制到 static 中。
vue + springboot 打包成一个.jar
qq_56660301的博客
11-20 1609
想要整合它们，首先打包完的vue的index.html可以直接打开1.ruoter的路由要设置好,修改路由文件，ruoter里的index.js2.修改配置文件vue.config.js3.修改完以后就可以进行打包了npm run build会生成一个dist文件夹，直接打开里面的index.html,可以显示内容就成功了。前端在vue.config.js写跨域打包后会不生效。建议后端写跨域。
使用宝塔面板部署后端项目到服务器
m0_62476845的博客
01-17 2793
在之前我已经写了一篇如何去部署前端项目，虽然能访问网站，但是没有数据库里面的内容是无法登录进去的，所以本篇文章会详细讲述如何安装数据库和部署后端项目。一、安装数据库1、点击宝塔面板软件商店。2、搜索mysql并且安装自己的数据库版本，安装过程需要一些时间。3、安装redis数据库（如果自己的项目需要redis就安装，没有就不用安装二、打包后端项目1、打开idea，点击右边的maven2、（1）如果只有一个模块，就直接点击模块里面的package打包完成。
springboot vue 打包分离部署
MyNameIsYiQiqi
10-08 464
前情摘要： 开发工具：idea，就先这样吧 一、SpringBoot 打包与部署 1、打包 //命令打包（-Dmaven.test.skip=true 跳过测试） mvn clean package -Dmaven.test.skip=true //idea不知道在哪输入命令？下边有张图 搞定之后如图，绿色反正比红色好看 看向你目录的target，对对对，就是它了...
Linux系统上打包和部署springboot+vue项目
07-27
在Linux系统上打包和部署springboot+vue项目的步骤如下： 1. 首先，你需要拉取git仓库的代码。复制git仓库的地址，并在Linux系统中使用命令拉取代码。\[1\] 2. 接下来，你需要打包Java项目。进入项目的目录，执行打包命令，生成一个jar包。你可以使用命令`java -jar springboot-affair-0.0.1-SNAPSHOT.jar`来运行打包好的Java项目。\[3\] 3. 然后，你需要部署前端vue项目。同样进入项目的目录，执行打包命令，生成前端的静态文件。将生成的静态文件部署到Nginx服务器上。 4. 在部署之前，确保Nginx、MySQL、Redis和MinIO已经启动。你可以使用相应的命令来启动这些服务。 5. 最后，访问你的项目。通过浏览器访问Nginx服务器的地址，即可查看部署好的springboot+vue项目。 总结起来，你需要拉取代码，打包Java项目，部署前端项目，启动Nginx、MySQL、Redis和MinIO，然后访问项目即可。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [Linux——在Linux系统上打包和部署springboot+vue项目，nginx+mysql+redis+minio](https://blog.csdn.net/weixin_56039103/article/details/126173205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [使用docker部署springboot+vue项目](https://blog.csdn.net/Ruhoney908/article/details/131024801)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值