使用 Nginx 部署 Vue + SpringBoot 项目

本文详细介绍了如何使用 Nginx 部署 Vue 前端和 SpringBoot 后端项目。首先,通过在 Vue 项目中运行打包命令生成 dist 目录,然后将 dist 内容上传到 Nginx 的 html 目录。接着,使用 IDEA 和 Maven 将 SpringBoot 项目打包为 jar 文件并上传到 Linux 服务器运行。最后,配置 Nginx 配置文件,调整前端监听端口和后端转发设置,并启动 Nginx 服务,成功后可以通过浏览器访问应用。
摘要由CSDN通过智能技术生成

一. Vue 项目的打包

在 Vue 项目路径下打开 cmd,输入以下命令:

npm run build

出现如下提示说明打包成功:

在这里插入图片描述
成功后会在项目目录下生成 dist 目录,将该目录下的 index.html 和 static 文件夹压缩后上传到 linux 下的 nginx 的 html 目录下:

在这里插入图片描述
解压缩生成 index.html 和 static 文件:

unzip dist.zip

二. SpringBoot 项目的打包

使用 IDEA 打开项目,使用 maven 将程序打成 jar 包:
在这里插入图片描述
打包命令:

mvn clean
mvn insta
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

盛夏温暖流年

可以赏个鸡腿吃嘛~

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

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

打赏作者

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

抵扣说明:

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

余额充值