詳解SpringBoot+Vue項(xiàng)目用寶塔面板部署指南
更新時(shí)間：2025年08月22日 09:27:06 作者：每天學(xué)習(xí)一丟丟
本文提供了Spring Boot+Vue項(xiàng)目在寶塔面板上的完整部署指南實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
（示意圖：用戶請(qǐng)求 → Nginx → 靜態(tài)資源/Vue → 反向代理/SpringBoot API）
環(huán)境要求
- 服務(wù)器配置建議
- CPU: 2核+
- 內(nèi)存: 4GB+
- 系統(tǒng): CentOS 7+/Ubuntu 20.04+
一、環(huán)境準(zhǔn)備
1. 寶塔面板安裝
# CentOS yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh # Ubuntu wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
2. 軟件安裝清單
| 軟件 | 版本要求 | 安裝路徑 |
|---|---|---|
| Nginx | 1.20+ | /www/server/nginx |
| MySQL | 5.7+ | /www/server/mysql |
| JDK | 11/17 | /www/server/java |
| Node.js | 16.x LTS | /www/server/nodejs |
二、后端部署
目錄結(jié)構(gòu)
/www/wwwroot/backend/ ├── your-project.jar# 主程序 ├── config/# 配置文件目錄 │└── application.yml# 生產(chǎn)環(huán)境配置 └── logs/# 日志目錄
Java項(xiàng)目管理器配置
關(guān)鍵參數(shù)：
- 項(xiàng)目路徑：
/www/wwwroot/backend - JDK版本：需與本地開(kāi)發(fā)環(huán)境一致
- 啟動(dòng)參數(shù)示例：
-Xms256m -Xmx512m -Dspring.profiles.active=prod
三、前端部署
構(gòu)建流程
# 安裝依賴（使用淘寶鏡像加速） npm install --registry=https://registry.npm.taobao.org # 構(gòu)建生產(chǎn)包 npm run build
目錄結(jié)構(gòu)
/www/wwwroot/frontend/ ├── dist/# 構(gòu)建產(chǎn)物 │├── static/ │└── index.html ├── node_modules/ └── vue.config.js# 生產(chǎn)環(huán)境代理配置
四、Nginx核心配置
完整配置示例
server {
listen 80;
server_name example.com;
# 前端路由配置
location / {
root /www/wwwroot/frontend/dist;
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache";
}
# 后端API配置
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 60s;
proxy_read_timeout 300s;
}
# 靜態(tài)資源緩存
location ~* \.(js|css|png|jpg)$ {
expires 365d;
access_log off;
}
}
五、HTTPS配置
- 寶塔面板 → 網(wǎng)站 → SSL → Let’s Encrypt
- 勾選"強(qiáng)制HTTPS"
- 修改Nginx自動(dòng)跳轉(zhuǎn)：
server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
常見(jiàn)問(wèn)題排查表
| 問(wèn)題現(xiàn)象 | 可能原因 | 解決方案 |
|---|---|---|
| 502 Bad Gateway | Java服務(wù)未啟動(dòng) | 檢查journalctl -u java_project日志 |
| 接口404 | Nginx路由配置錯(cuò)誤 | 檢查proxy_pass地址末尾是否帶/ |
| 靜態(tài)資源加載失敗 | Vue publicPath配置錯(cuò)誤 | 確保設(shè)置為/或./ |
| 數(shù)據(jù)庫(kù)連接失敗 | MySQL用戶權(quán)限不足 | 執(zhí)行GRANT ALL ON db.* TO 'user'@'%' |
進(jìn)階配置
1. 日志切割配置
# 在寶塔計(jì)劃任務(wù)中添加 0 0 * * * /usr/sbin/logrotate -f /etc/logrotate.d/java-app
2. 監(jiān)控配置
建議監(jiān)控：
- Java進(jìn)程內(nèi)存占用
- MySQL連接數(shù)
- 磁盤空間使用率
提示：部署完成后建議進(jìn)行壓力測(cè)試，可使用ab -n 1000 -c 50 http://example.com/api/test測(cè)試接口性能
到此這篇關(guān)于詳解SpringBoot+Vue項(xiàng)目用寶塔面板部署指南的文章就介紹到這了,更多相關(guān)SpringBoot Vue寶塔面板部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章給大家分享了vue檢測(cè)對(duì)象和數(shù)組的變化的相關(guān)知識(shí)點(diǎn)與實(shí)例代碼，有興趣的朋友參考下。2018-06-06
vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
一文教你徹底解決Vue動(dòng)態(tài)路由復(fù)制標(biāo)簽頁(yè)空白問(wèn)題
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)路由復(fù)制標(biāo)簽頁(yè)空白問(wèn)題的相關(guān)解決方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-11-11
使用Vue構(gòu)建動(dòng)態(tài)表單生成器的實(shí)現(xiàn)步驟
在前端開(kāi)發(fā)中,表單是非常常見(jiàn)的交互元素,然而,當(dāng)表單的結(jié)構(gòu)和字段需要根據(jù)不同的業(yè)務(wù)場(chǎng)景動(dòng)態(tài)變化時(shí),手動(dòng)編寫每個(gè)表單的代碼會(huì)變得非常繁瑣,所以我們可以使用Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)表單生成器,本文將詳細(xì)介紹實(shí)現(xiàn)動(dòng)態(tài)表單生成器的原理,需要的朋友可以參考下2025-04-04
vue3+elementui plus如何實(shí)現(xiàn)多選分頁(yè)列表的新增和修改
這篇文章主要介紹了vue3+elementui plus如何實(shí)現(xiàn)多選分頁(yè)列表的新增和修改問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
使用Vue3優(yōu)雅地實(shí)現(xiàn)表格拖動(dòng)排序
在?Vue.js?中主要通過(guò)第三方庫(kù)實(shí)現(xiàn)表格拖動(dòng)排序功能,其中最常用的庫(kù)是?SortableJS,下面我們就來(lái)看看如何使用SortableJS實(shí)現(xiàn)表格拖動(dòng)排序吧2025-01-01
Vue是構(gòu)建Web界面的JavaScript庫(kù)，原稱為Vue.js，它可以通過(guò)簡(jiǎn)潔的API來(lái)提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
創(chuàng)建Vue3項(xiàng)目有兩種常見(jiàn)的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項(xiàng)目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關(guān)于如何使用vite創(chuàng)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue+WebSocket頁(yè)面實(shí)時(shí)刷新長(zhǎng)連接的實(shí)現(xiàn)
最近vue項(xiàng)目要做數(shù)據(jù)實(shí)時(shí)刷新，數(shù)據(jù)較大，會(huì)出現(xiàn)卡死情況，所以本文主要介紹了頁(yè)面實(shí)時(shí)刷新長(zhǎng)連接，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06