RuoYi-Vue專案部署流程

RuoYi-Vue專案部署
專案地址
部署成果
後端部署
jar部署
war部署
前端部署
使用nginx部署
tomcat部署
部署在ROOT下（單獨佔用容器）
部署在ROOT下（和後端同一容器）
部署在非ROOT下
專案地址
框架地址：https://gitee.com/y_project/RuoYi-Vue
文件地址：https://doc.ruoyi.vip/ruoyi-vue/
issues：https://gitee.com/y_project/RuoYi-Vue/issues
部署成果


後端部署
可以使用idea或者eclipse或者專案下bin目錄中的指令碼進行打包（war 
 
/ jar），打包時有幾點需要注意：

logback.xml檔案中的路徑建議改為./logs
application.yml中的profile需要改為伺服器存在的真實路徑

jar部署
因為springboot中已經內建了tomcat或者其他容器，不需要另外部署tomcat，按照下面步驟操作：

將打包後的jar檔案放在任意一個位置；

在伺服器上和jar同一個目錄下新建一個config目錄，將專案裡的application-druid.yml、application.yml或者其他yml配置檔案複製出來，放入config目錄；

執行命令啟動：nohup java -jar ruoyi-admin.jar
也可以加更多的啟動引數，如果是linux也可以把專案下的ry.sh放在jar同級目錄下，修改ry.sh裡的AppName和相關路徑，執行.
 
/ry.sh start即可啟動

指令碼使用方法
啟動：./ry.sh start
停止：./ry.sh stop
重啟：./ry.sh restart
狀態：./ry.sh status

可以檢視啟動日誌或者使用curl或者瀏覽器訪問是否已經啟動，訪問地址：http://ip:port，如果返回{"msg":"請求訪問：/，認證失敗，無法訪問系統資源","code":401}，證明部署成功；

—說明
放在config目錄是為了以後修改埠號以及資料庫連線等資訊方便，直接修改yml配置檔案即可，不需要重現打包jar，因為springboot載入配置檔案順序是
1、/config/application.yml
 
2、/application.yml
3、classpath:/config/application.yml
4、classpath:/application.yml
注意：這些檔案或者目錄是根據命令發起目錄來的，假如指令碼或命令是在admin目錄下執行，而jar檔案是在admin/target目錄下，則需要將config/xxx.yml檔案及目錄放在admin目錄下

war部署
將打包後的war檔案，放在服務的webapps下，可以使用解壓縮軟體解壓（war其實就是個壓縮包），解壓後將資料夾重新命名為ROOT，如果需要帶專案有也可以配置為其他名稱，更多tomcat配置這裡不再贅述；
啟動tomcat，可以檢視啟動日誌或者使用curl或者瀏覽器訪問是否已經啟動，訪問地址：http://ip:port，如果返回{"msg":"請求訪問：/，認證失敗，無法訪問系統資源","code":401}，證明部署成功；
前端部署
前端部署可以使用nginx部署或者直接使用tomcat部署。

使用nginx部署
將前端打包，命令：npm run build:prod，將dist（預設的）目錄放在伺服器的任意一個資料夾下，比如這裡放在/home/www/projects/ruoyi-ui

在nginx配置檔案中做下面的配置，此處後端的埠（8080）需要根據實際後端部署情況修改

server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/www/projects/ruoyi-ui/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
        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/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

啟動nginx或者過載nginx

瀏覽器訪問http://ip檢視是否正常顯示，如果出現登入介面並且顯示驗證碼說明部署成功

tomcat部署
一般情況下使用nginx部署，但是有些時候也有人使用tomcat部署，按照下面的流程進行：

部署在ROOT下（單獨佔用容器）
注意：這裡不需要在server.xml下增加HOST節點

如果你的後端和前端不在同一個tomcat下，也就是單獨部署vue，那就需要修改.env.production檔案中的VUE_APP_BASE_API為你後端地址+埠，例如VUE_APP_BASE_API = '//localhost:8080'

將前端打包，命令：npm run build:prod，將dist（預設的）目錄放在伺服器tomcat的webapps下，將dist重新命名為ROOT

在ROOT下新建WEB-INF目錄，在WEB-INF目錄中新建web.xml檔案如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1" metadata-complete="true">
     <display-name>Router for Tomcat</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

最終效果如下圖：


啟動tomcat，瀏覽器訪問http://ip:port，出現登入介面和驗證碼說明部署成功

部署在ROOT下（和後端同一容器）
注意：這裡不需要在server.xml下增加HOST節點

如果你的後端和前端在同一個tomcat下，那就需要修改.env.production檔案中的VUE_APP_BASE_API為你後端的專案名，例如VUE_APP_BASE_API = '/prod-api'，其中prod-api就是你的後端專案名，部署方法可以參考上面的後端部署-war部署

將前端打包，命令：npm run build:prod，將dist（預設的）目錄放在伺服器tomcat的webapps下，將dist重新命名為ROOT

在ROOT下新建WEB-INF目錄，在WEB-INF目錄中新建web.xml檔案如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1" metadata-complete="true">
     <display-name>Router for Tomcat</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

最終效果如下圖：


啟動tomcat，瀏覽器訪問http://ip:port，出現登入介面和驗證碼說明部署成功

部署在非ROOT下
這裡部署的專案名是admin

如果你的後端和前端在同一個tomcat下，那就需要修改.env.production檔案中的VUE_APP_BASE_API為你後端的專案名，例如VUE_APP_BASE_API = '/prod-api'，其中prod-api就是你的後端專案名；如果你的後端和前端不在同一個tomcat下，也就是單獨部署vue，那就需要修改.env.production檔案中的VUE_APP_BASE_API為你後端地址+埠，例如VUE_APP_BASE_API = '//localhost:8080'。

修改vue.config.js下的publicPath，例如：publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/", 這裡根據你部署的專案名決定，這個影響資原始檔的引用

router/index.js下新增base: "/admin",，如下

export default new Router({
  base: "/admin",
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
1

Navbar.vue中的退出方法裡location.href = '/index';改為location.href = this.$router.options.base + '/index';

將前端打包，命令：npm run build:prod，將dist（預設的）目錄放在伺服器tomcat的webapps下，將dist重新命名為admin

在server.xml中加入Host節點下新增：<Context docBase="admin" path="/admin/" reloadable="true" source=""/>

在admin下新建WEB-INF目錄，在WEB-INF目錄中新建web.xml檔案如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1" metadata-complete="true">
     <display-name>Router for Tomcat</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

啟動tomcat，瀏覽器訪問http://ip:port/admin，出現登入介面和驗證碼說明部署成功

其他配置方式可以自己參考上面的方式嘗試，需要注意的點：

1、tomcat專案名路徑配置
2、vue靜態資源路徑配置相應和專案名一致
————————————————
版權宣告：本文為CSDN博主「Mr.李大哥」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/u014440968/article/details/115753615