快捷導(dǎo)航

idea部署RuoYi-Vue分離版的圖文詳解

更新時(shí)間：2024年06月25日 09:06:33 作者：Excellent的崽子

RuoYi-Vue是一款基于SpringBoot+Vue的前后端分離極速后臺(tái)開發(fā)框架, 本文主要介紹了idea部署RuoYi-Vue分離版的圖文詳解,具有一定的參考價(jià)值,感興趣的可以了解一下

現(xiàn)在大部分公司都使用到了若依框架進(jìn)行二次開發(fā)，相信還有很多小伙伴們對(duì)若依不是很了解，RuoYi-Vue是一款基于SpringBoot+Vue的前后端分離極速后臺(tái)開發(fā)框架，是一個(gè) Java EE 企業(yè)級(jí)快速開發(fā)平臺(tái)，基于經(jīng)典技術(shù)組合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），內(nèi)置模塊如：部門管理、角色用戶、菜單及按鈕授權(quán)、數(shù)據(jù)權(quán)限、系統(tǒng)參數(shù)、日志管理、代碼生成等。在線定時(shí)任務(wù)配置；支持集群，支持多數(shù)據(jù)源，支持分布式事務(wù)。

想對(duì)若依進(jìn)行更多了解可以傳送官方文檔： RuoYi

很多小伙伴們還不會(huì)部署這個(gè)項(xiàng)目到自己的本地，現(xiàn)在我就來教你將ruoyi-vue部署到本地，這里我們以idea進(jìn)行教程。

話不多說，開干！

準(zhǔn)備工作

JDK >= 1.8 （推薦1.8版本）
MySQL >= 5.7 （推薦5.7版本）
Maven >= 3.0
Node >= 12

第一步，拉取項(xiàng)目到我們的idea：

前往Gitee下載頁面下載解壓到工作目錄，這里前提，我們需要給idea配置git，然后直接通過鏈接拉取項(xiàng)目即可。

1.本地下載git，配置到idea中。

在這里插入圖片描述

配置好以后，我們就可以通過點(diǎn)擊 File -> New -> Project from Version Controller 從遠(yuǎn)程倉(cāng)庫(kù)去獲取我們需要的項(xiàng)目，如圖：

在這里插入圖片描述

2.將gitee路徑復(fù)制到URL框中，設(shè)置自定義路徑，點(diǎn)擊Clon就開始加載我們的項(xiàng)目了。

在這里插入圖片描述

3.拉取成功就長(zhǎng)下面這個(gè)樣子，如圖：

在這里插入圖片描述

tips：因?yàn)楸卷?xiàng)目是前后端完全分離的，所以需要前后端都單獨(dú)部署好，才能進(jìn)行訪問。

第二步，接下來我們準(zhǔn)備我們后端啟動(dòng)工作：

必要配置：

修改數(shù)據(jù)庫(kù)連接，編輯resources目錄下的application-druid.yml

在這里插入圖片描述

修改服務(wù)器配置，編輯resources目錄下的application.yml

在這里插入圖片描述

這樣基礎(chǔ)配置就搞好了，接下來想要啟動(dòng)我們的項(xiàng)目，也要保證我們本地的Redis也是在運(yùn)行著的，所以就需要我們本地有下載好的Redis數(shù)據(jù)庫(kù)，我們將它運(yùn)行起來。如果沒有也沒關(guān)系，請(qǐng)傳送至官網(wǎng)下載： Redis

安裝好以后，我們進(jìn)入Redis路徑下，雙擊redis-server.exe文件，如果閃退可以使用管理員運(yùn)行或者在rides目錄下打開黑窗口執(zhí)行cmd命令：redis-server.exeredis.windows.conf

在這里插入圖片描述

Rdis啟動(dòng)成功就長(zhǎng)下面這個(gè)樣子，如圖：

在這里插入圖片描述

Reids啟動(dòng)成功，接下來我們就可以啟動(dòng)我們的后端項(xiàng)目了，下面就是后端啟動(dòng)成功的樣子，如圖：

在這里插入圖片描述

第三步，前端部署

首先你需要在本地安裝部署nodejs，因?yàn)槲覀兘酉聛矶际峭ㄟ^npm命令來進(jìn)行前端的啟動(dòng)工作。

Node.js 安裝包及源碼下載地址為：Node.js

Node.js的安裝很簡(jiǎn)單，只要一直下一步就好了，安裝好了以后我們開始配置它的環(huán)境變量，首先打開我們的環(huán)境變量配置（找不到的可以打開搜索框直接搜索環(huán)境變量即可），在系統(tǒng)變量中找到path屬性，然后將我們的Node.js安裝路徑添加到變量值中，就OK了，如圖：

在這里插入圖片描述

下一步，我們右鍵ruoyi-ui(這個(gè)就是我們的前端項(xiàng)目)，打開終端，如圖：

在這里插入圖片描述

下一步，從上往下輸入命令，即可

# 安裝依賴
npm install

# 強(qiáng)烈建議不要用直接使用 cnpm 安裝，會(huì)有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。
# 這里我們使用的是淘寶鏡像
npm install --registry= https://registry.npm.taobao.org

# 本地開發(fā) 啟動(dòng)項(xiàng)目
npm run dev

最后，我們的若依項(xiàng)目啟動(dòng)成功！

前端啟動(dòng)成功會(huì)自動(dòng)打開瀏覽器，前端端口號(hào)默認(rèn)80，如圖：

在這里插入圖片描述