将Vue+Springboot项目部署到云服务器

### 使用宝塔面板部署 Vue3 和 SpringBoot 项目 #### 准备工作 确保已经准备好以下资源： - 已经编译完成的 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解决方案部署。