vue3+springboot部署到Windows服务器

本文记录了将项目部署到服务器的过程,包括Vue、MySQL、Nginx及SpringBoot项目的具体部署步骤。通过本文,读者可以了解从准备环境到最终部署成功的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

提示:这里可以添加本文要记录的大概内容:

参考网上将项目部署到服务器,这里只介绍简单部署的方式。


提示:以下是本篇文章正文内容,下面案例可供参考

一、准备工作

(1) 安装Nginx —— 用于部署vue
(2) 安装mysql —— 数据库
(3)安装jdk
(4) 部署springboot项目

二、使用步骤

1.vue部署

打包vue项目
在这里插入图片描述
将dist文件夹拷贝到Nginx的安装目录下
在这里插入图片描述

2.mysql部署

mysql网上资料很多,就不多说
在这里插入图片描述

3.配置Nginx

配置Nginx
因为现在是把vue前端交给了Nginx代理,所以这里的端口号不一定是我们在vue项目中设置的端口号。这里的端口号必须是当前服务器开放的端口号。
在这里插入图片描述
启动Nginx
打开Nginx安装路径下的命令行

代码如下(示例):

start nginx

nginx -s stop

在这里插入图片描述
在浏览器中打开网页:http://scck2dev02:8081
自动跳到:http://scck2dev02:8081/#/login
在这里插入图片描述

4.后端部署

package打包springboot项目
在这里插入图片描述
服务器启动springboot项目
在这里插入图片描述
部署成功
在浏览器中打开网页:http://scck2dev02:8081
在这里插入图片描述

总结

记录点点滴滴

### 使用宝塔面板部署 Vue3SpringBoot 项目 #### 准备工作 确保已经准备好以下资源: - 已经编译完成的 SpringBoot jar 文件[^1] - 编译后的 Vue3 `dist` 目录中的静态文件 (包括 static, index.html)[^2] #### 创建环境 进入宝塔面板,创建一个新的站点用于托管前端部分,并配置相应的域名解析。 对于数据库需求,如果应用涉及数据存储,则需在 Navicat 或者直接通过宝塔面板内的 MySQL 数据库管理工具来建立新的数据库实例[^3]。 #### 部署 SpringBoot 后端服务 1. 将打包好的 SpringBoot 应用程序 jar 文件上传至服务器指定位置。 2. 利用宝塔面板的任务计划功能或是手动执行命令启动该 Java 应用。可以考虑编写简单的 shell 脚本来简化这一步骤: ```bash nohup java -jar /path/to/your-springboot-app.jar & ``` 为了保证后端接口能够被外部访问,还需要确认防火墙已允许对应的 HTTP(S) 请求到达此服务器上的应用程序监听端口[^4]。 #### 发布 Vue 前端页面 将构建出来的 Vue3 项目的 dist 文件夹内容复制到之前创建好的网站根目录下。这样当用户请求时就会加载这些静态 HTML/CSS/JS 文件。 另外需要注意的是前后端分离架构下的跨域资源共享(CORS)问题以及 API 接口调用路径设置等问题。可以通过调整 Nginx 反向代理规则解决这些问题。 #### 设置反向代理 为了让前端可以直接调用同一域名下的API接口而不受浏览器同源策略限制,可以在宝塔面板中为当前站点添加一条Nginx反向代理规则指向本地运行着的Spring Boot服务地址。 例如假设后端服务正在8080端口上提供RESTful Web Service,则可在HTTP选项卡里新增如下形式的转发条目: ```nginx location /api { proxy_pass http://localhost:8080; } ``` 以上操作完成后保存更改并重启Web服务器使新配置生效即可实现完整的Vue3+SpringBoot解决方案部署
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

panda_225400

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值