快捷導(dǎo)航

打包部署若依(RuoYi)SpringBoot后端和Vue前端圖文教程

更新時間：2024年05月28日 10:28:08 作者：獨自成長

若依是一個使用Spring Boot作為后端和Vue.js作為前端的全棧應(yīng)用開發(fā)平臺,下面這篇文章主要給大家介紹了關(guān)于打包部署若依(RuoYi)SpringBoot后端和Vue前端的相關(guān)資料,需要的朋友可以參考下

（1）、打包若依SpringBoot后端

打開若依，點擊右側(cè)的Maven展開Maven管理，選擇ruoyi>Lifecycle 先雙擊clean清除原本啟動項目時生成的文件。然后點擊package等待項目打包

打包完成后會在ruoyi-admin>src>target里面看到.jar后綴的文件，就代表打包成功（可以把這個文件復(fù)制出來存放到其他地方，方便后面啟動）

（2）、部署若依SpringBoot后端

把剛剛打包好的文件存放到自己的文件位置

然后在路徑欄里輸入cmd，回車會打開一個命令框

在命令框里輸入java -jar ruoyi-admin.jar回車啟動打包好的jar包。

這個窗口不要關(guān)閉?。。?！關(guān)閉就是結(jié)束運行了

（3）、打包若依Vue前端

使用Visual Studio Code打開ruoyi-ui文件夾

打開終端：左上角任務(wù)欄選擇終端>新建終端

在新建終端中輸入命令npm run build:prod，回車等待打包完成

打包完成后查看文件目錄，有一個叫dist的文件夾就是打包成功了，dist的文件夾介紹打包的Vue項目了

（4）、部署若依Vue前端

前端部署需要使用nginx 下載地址（https://nginx.org/en/download.html）下載

下載完成解壓到任意地方

然后進(jìn)入nginx-1.22.1>html 把剛剛打包好的Vue前端dist文件復(fù)制進(jìn)來

然后返回上一層進(jìn)入conf文件夾

用Visual Studio Code打開nginx.conf

更改以下代碼（改完ctrl+s保存就可以關(guān)閉Visual Studio Code）

        location / {
            root   html/dist;  // 打包好的文件路徑
            try_files $uri $uri/ /index.html; # 將所有路由請求重定向到index.html
        }
 
        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;       #后臺項目的運行端口
        }

啟動ngxin 首先回到nginx-1.22.1文件夾里

在路徑欄里輸入cmd，回車會打開一個命令框