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