快捷導(dǎo)航

SpringBoot+Vue項(xiàng)目打包部署完整步驟教程

更新時(shí)間：2024年10月12日 09:53:14 作者：JackYanZhang

這篇文章主要介紹了SpringBoot+Vue項(xiàng)目打包部署的相關(guān)資料,包括Vue項(xiàng)目的打包設(shè)置、SpringBoot的配置修改、跨域問題處理、使用Nginx配置反向代理以及最終的項(xiàng)目啟動(dòng),教程假定開發(fā)者已具備完整的前后端分離項(xiàng)目和配置好環(huán)境的服務(wù)器,需要的朋友可以參考下

前言

本教程旨在幫助開發(fā)者，完成基于springboot后端項(xiàng)目和基于vue前端項(xiàng)目的打包以及服務(wù)器部署。本教程的前提是開發(fā)者已經(jīng)擁有一個(gè)完整的springboot+vue的前后端分離的項(xiàng)目，以及一臺(tái)配置好JDK和MySQL以及nginx的環(huán)境的云服務(wù)器。目標(biāo)是能夠?qū)㈨?xiàng)目部署到云服務(wù)器上，并通過云服務(wù)器的IP訪問項(xiàng)目。

一.Vue前端項(xiàng)目打包

在VSCode中打開前端項(xiàng)目的文件夾，編輯vue.config.js配置文件,添加以下代碼塊：

module.exports = {
  publicPath: "/",
  assetsDir: "static",
  outputDir: 'dist',
}

如圖所示：

注：publicPath的設(shè)置會(huì)影響到應(yīng)用在部署環(huán)境中的運(yùn)行情況，特別是在處理動(dòng)態(tài)路由時(shí)可能會(huì)出現(xiàn)問題。如果你設(shè)置 publicPath 為 ./，它會(huì)被解釋為當(dāng)前路徑，這在大多數(shù)情況下是沒有問題的，但在某些服務(wù)器配置如（Nginx）中，可能會(huì)導(dǎo)致路由解析錯(cuò)誤，尤其是對(duì)于動(dòng)態(tài)路由的情況。所以本教程中的pulicPath設(shè)置為''/''。

然后將request.js中的baseURL的localhost設(shè)置為服務(wù)器的IP，以便保證后續(xù)項(xiàng)目部署前后端的對(duì)接。否則后續(xù)部署到服務(wù)器上可能會(huì)出現(xiàn)：前后端對(duì)接不上，前端頁面無數(shù)據(jù)顯示的情況。

打開終端（注意：這里需要新建一個(gè)終端窗口，而不是在當(dāng)前的窗口，否則之前所做的更改均無效），輸入npm run build命令執(zhí)行打包，打包結(jié)束后當(dāng)前目錄會(huì)出現(xiàn)一個(gè)dist文件夾，即為打包后的前端項(xiàng)目。

二.SpringBoot后端項(xiàng)目打包

用IDEA打開后端項(xiàng)目，編輯application.yaml或者application.properties配置文件，將數(shù)據(jù)庫連接的IP由localhost改為服務(wù)器的數(shù)據(jù)庫IP。(前提：服務(wù)器上有對(duì)應(yīng)的數(shù)據(jù)庫環(huán)境和對(duì)應(yīng)項(xiàng)目的數(shù)據(jù)庫，并且關(guān)閉了防火墻，能夠在本地訪問)

打開后端項(xiàng)目的跨域配置文件，將localhost改為服務(wù)器的IP，以便項(xiàng)目部署到服務(wù)器后，允許前端項(xiàng)目8080端口能夠向后端項(xiàng)目的8081端口發(fā)送數(shù)據(jù)請(qǐng)求。（本教程前端項(xiàng)目占用8080端口,后端項(xiàng)目占用8081端口）

如果項(xiàng)目中有單元測(cè)試的代碼，記得注釋掉，否則可能會(huì)打包失敗。

完成了以上配置，即可執(zhí)行打包（如果要重新打包，建議在每次打包前，先輸入mvn clean 清除已有的打包文件）。在IDEA中新開一個(gè)終端窗口，輸入命令：

mvn package

打包成功后，項(xiàng)目目錄中會(huì)新增一個(gè)target文件夾，其中.jar結(jié)尾的文件即為打包成功后的項(xiàng)目包。

進(jìn)入target目錄，輸入命令:

java -jar yuedong-0.0.1-SNAPSHOT.jar

即可啟動(dòng)項(xiàng)目。

三.項(xiàng)目部署

前后端項(xiàng)目打包完成后，現(xiàn)在需要將項(xiàng)目部署到云服務(wù)器上。首先打開WinSCP，連接云服務(wù)器。將前端項(xiàng)目打包的dist文件夾和后端項(xiàng)目打包后的yuedong-0.0.1-SNAPSHOT.jar包上傳到服務(wù)器上對(duì)應(yīng)的目錄中（本教程事先在服務(wù)器的/opt目錄中新建了名為yuedong的項(xiàng)目文件夾，里面的front和backend目錄下分別存放前后端的打包文件）。

打開Xshell，連接上云服務(wù)器，輸入命令：

vim /etc/nginx/nginx.conf

編輯nginx.conf配置文件（這里需要首先在服務(wù)器上安裝nginx，如果未安裝，請(qǐng)先輸入命令：sudo apt install nginx或者sudo yum install nginx，根據(jù)自己的服務(wù)器的操作系統(tǒng)去安裝），配置如下(本教程的nginx配置可能比較簡(jiǎn)單，更復(fù)雜專業(yè)的配置，讀者可查閱nginx的教程文檔或者其他博客，本教程追求最簡(jiǎn)單可行的配置方式)：

events {}

http {
    server {
        listen 8080;
        server_name localhost;
        root /opt/yuedong/front/dist;
        index index.html ;
        location / {
            root /opt/yuedong/front/dist;
            try_files $uri $uri/ /index.html; 
            expires 30d;
        }
     }
}

讀者根據(jù)自己的項(xiàng)目端口，和dist文件夾目錄自行更改以上配置。編輯完后輸入 :wq保存退出，然后輸入以下命令重啟nginx服務(wù)(本教程中，服務(wù)器的nginx是已經(jīng)開啟了的，如果首次啟動(dòng)請(qǐng)輸入：sudo systemctl start nginx)：

nginx -s reload

配置成功后，現(xiàn)在打開瀏覽器，輸入服務(wù)器的公網(wǎng)IP以及端口（本教程是8080）,可以看到項(xiàng)目的前端頁面。現(xiàn)在部署成功了一半，由于是前后端分離，前端只有靜態(tài)的頁面，并沒有數(shù)據(jù)。接下來得在服務(wù)器中啟動(dòng)我們剛剛上傳的后端項(xiàng)目jar包，開啟后端服務(wù)。

打開Xshell，進(jìn)入到存放后端jar包的目錄下，輸入以下命令開啟后端服務(wù)：

nohup java -jar yuedong-0.0.1-SNAPSHOT.jar &

注：java -jar yuedong-0.0.1-SNAPSHOT.jar這條命令也會(huì)啟動(dòng) Java 應(yīng)用程序，但它會(huì)在當(dāng)前終端窗口占用并顯示輸出。如果你關(guān)閉終端或者按下 Ctrl+C 終止命令，Java 程序也會(huì)隨之停止。nohup java -jar yuedong-0.0.1-SNAPSHOT.jar &：nohup 命令用于忽略信號(hào)，允許程序在后臺(tái)繼續(xù)運(yùn)行。& 符號(hào)將該命令放到后臺(tái)執(zhí)行，不阻塞當(dāng)前終端。這樣做可以讓 Java 程序在后臺(tái)持續(xù)運(yùn)行，即使你關(guān)閉了終端窗口或退出了登錄會(huì)話。

開啟后端服務(wù)后，再次刷新瀏覽器的頁面，可以看到前端頁面有數(shù)據(jù)出現(xiàn)了。