前言

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

一.Vue前端項目打包

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

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

如圖所示：

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

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

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

二.SpringBoot后端項目打包

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

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

如果項目中有單元測試的代碼，記得注釋掉，否則可能會打包失敗。

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

mvn package

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

進入target目錄，輸入命令:

java -jar yuedong-0.0.1-SNAPSHOT.jar

即可啟動項目。

三.項目部署

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

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

vim /etc/nginx/nginx.conf

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

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ù)自己的項目端口，和dist文件夾目錄自行更改以上配置。編輯完后輸入 :wq保存退出，然后輸入以下命令重啟nginx服務(wù)(本教程中，服務(wù)器的nginx是已經(jīng)開啟了的，如果首次啟動請輸入：sudo systemctl start nginx)：

nginx -s reload

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

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

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

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

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

至此，項目打包部署完成！

總結(jié)

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

最新評論