“

大家好，我是雄雄，歡迎關注微信公眾號：????雄雄的小課堂????

”

今天，給大家分享的是，Springboot+Vue項目如何部署上線的詳細步驟。

代碼編輯器

前端：Webstorm 2021.1.2

后端：IntelliJ IDEA 2021.1.2

所用技術

前端：avue

后端：Springboot

準備工作

• 1.首先你先需要有一臺服務器，直接去各大云廠買一臺即可，我這邊使用的是騰訊云服務器，2H4G5M的，已經部署了5個項目了，都很流暢，最后需要備案

• 2.去各大云廠注冊個域名，用來訪問項目，域名很便宜，幾十塊錢能買一年的。解析到你的服務器下，域名最后也需要備案。

打包項目

1.在IntelliJ IDEA 2021.1.2以下簡稱idea中，點擊菜單欄中的視圖--》工具窗口--》Maven--》打開項目--》生命周期--》雙擊clean,清除目錄中的生成結果。

2.雙擊下面的package開始打包，等控制臺中日志記錄運行完之后，會發現此時項目中多了個target的目錄，改目錄中有個.jar文件就是我們的需要往服務器中傳的。

在idea中打包springboot項目還可以使用命令的方式(在終端中定位到當前項目的目錄下)：

• mvn claen：清除目錄中的生成結果

• mvn package：打包程序

3.將該文件上傳至服務器的指定目錄下，我這邊傳到了/www/wwwroot/hbv目錄中,大家可以自定義。

4.打開Webstorm，直接在下面的終端中執行npm run build,等控制臺執行完即可。此時你就會發現項目中多了個dist目錄，將該目錄直接上傳到服務器中指定位置，我這邊還是傳到了/www/wwwroot/hbv目錄中，大家可以自定義。

到現在為止，前后端項目都已經打包完成，且已經傳到了服務器中（怎么傳先不介紹，大家可以用一款免費軟件FileZilla，用了好幾年了，一直很穩定）

軟件界面大致就是這樣的，左邊客戶端，右邊服務器，上傳：左邊文件拉到右邊。下載：右邊拉到左邊，特別簡單。

配置nginx

1.我這邊比較偷懶，直接在服務器中裝了個寶塔面板，可以省好多事，當然nginx也是可視化的。

2.由于我服務器中有多個項目，nginx中的配置文件沒必要都展示，所以我就把當前后端分離版的項目配置信息貼出來：

?server?{listen???????80;server_name??xxxx.com;location?/?{root???/www/wwwroot/hbv/dist;try_files?$uri?$uri/?/index.html;index??index.html?index.htm;}location?^~?/api/?{proxy_pass?http://xx.xx.xx.xx:6666/;proxy_connect_timeout?300s;proxy_send_timeout?300s;proxy_read_timeout?300s;}error_page???500?502?503?504??/50x.html;location?=?/50x.html?{root???html;}}

關鍵配置信息說明：

• server_name：寫你的域名即可，通過該域名訪問服務器中的項目

• root：配置的是你前端項目上傳的地址，需要制定到dist目錄下，請求時自動會找index.html頁面

• proxy_pass：配置的是你后端訪問地址,直接寫服務器地址加端口號即可，注意端口號別沖突了

在終端啟動后端服務

1.在根目錄下，通過命令：cd /www/wwwroot/hbv目錄下，因為我后端的項目放在了改目錄下

2.通過命令：ls查看后端項目是否存在

3.通過命令：nohup java -jar blog-web-2.2.5.jar &啟動服務，記得一定要按兩下回車

5.最后在瀏覽器中通過域名就可以訪問了。

若是有問題的，可以在留言區留言說明，最后點個在看再走唄~

總結

以上是生活随笔為你收集整理的前后端分离项目部署上线详细教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。