前言

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

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

在VSCode中打開(kāi)前端項(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)問(wèn)題。如果你設(shè)置 publicPath 為 ./，它會(huì)被解釋為當(dāng)前路徑，這在大多數(shù)情況下是沒(méi)有問(wèn)題的，但在某些服務(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ì)接不上，前端頁(yè)面無(wú)數(shù)據(jù)顯示的情況。

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

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

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

打開(kāi)后端項(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中新開(kāi)一個(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ù)器上。首先打開(kāi)WinSCP，連接云服務(wù)器。將前端項(xiàng)目打包的dist文件夾和后端項(xiàng)目打包后的yuedong-0.0.1-SNAPSHOT.jar包上傳到服務(wù)器上對(duì)應(yīng)的目錄中（本教程事先在服務(wù)器的/opt目錄中新建了名為yuedong的項(xiàng)目文件夾，里面的front和backend目錄下分別存放前后端的打包文件）。

打開(kāi)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)開(kāi)啟了的，如果首次啟動(dòng)請(qǐng)輸入：sudo systemctl start nginx)：

nginx -s reload

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

 打開(kāi)Xshell，進(jìn)入到存放后端jar包的目錄下，輸入以下命令開(kāi)啟后端服務(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ì)話。

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

至此，項(xiàng)目打包部署完成！

總結(jié)

到此這篇關(guān)于SpringBoot+Vue項(xiàng)目打包部署的文章就介紹到這了,更多相關(guān)SpringBoot+Vue項(xiàng)目打包部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論