首页 >> 大全

手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录

2023-12-30 大全 23 作者：考证青年

手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示页面

/12/30 4:58:49

下载源码（当前版本3.8.5）RuoYi-Vue: 基于， ，JWT，Vue & 的前后端分离权限管理系统，同时提供了 Vue3 的版本 () 创建数据库(一定要是这三个，否则部署成功可能菜单乱码，我就是乱码后删库重新按照下图建的)

3. 项目导入IDEA，启动后端

4. 下载Node.js ，注意.8.5版本的前端只能试用或以下的版本，否则下载依赖正常，启动测试环境或打包就会报错 5. 安装前端依赖

5.1. 进入RuoYi-Vue-\ruoyi-ui文件夹下打开cmd执行npm 下载依赖

如果是国内网络请使用以下来下载依赖（下载速度飞快，若依官网推荐的） ：


npm install --registry=https://registry.npmmirror.com

注意：如果npm 时一直卡住不动：

F:\ruoyi-ui>npm install --registry=https://registry.npmmirror.com
[..................] \ idealTree:ruoyi-ui: sill idealTree buildDeps  ---------------------卡在这一步不动

网上查到的结果都是设置淘宝镜像再次下载

npm config set registry https://registry.npm.taobao.org，更换淘宝镜像地址

我自己的问题是因为公司网络是国外的，设置代理之后就成功安装了

前后端分离用户登录状态_前后端分离权限管理_

5.2 直接启动


npm run dev

启动成功后会自动打开浏览器，登录即可正常使用 以下是打包ruoyi前端后放入Nginx中启动 前端打包


npm run build:prod

2. 把打包后的dist文件夹移动到nginx下的html文件夹下：

3. 修改nginx的配置（nginx\conf\nginx.conf）：


worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       80; #前端项目的端口server_name  localhost;location / {#（html/dist即可，代表在nginx根目录下的html中dist文件夹）root   html/dist; #vue前端项目打包后的dist文件夹的地址的路径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后页面登录后点击注销显示页面的修复版配置：

 server {listen       81; #前端项目的端口server_name  localhost;root html/ruoyi-vue ;#代表在nginx根目录下的html/ruoyi-vue文件夹，ruoyi-vue是我的改名，原本叫distlocation / {try_files $uri $uri/ @router; #解决404问题的关键行index  index.html index.htm;}location @router {rewrite ^.*$ /index.html last;}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:8888/;       #后台项目的运行端口}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

4. 运行Nginx ，在Nginx根目录运行cmd，输入start nginx即可启动，1秒之后访问即可（如需重启Nginx在cmd中输入nginx -s 即可）：

注意：nginx的路径不能有中文，nginx.conf中配置也不能有中文，否则启动会报错，可以到日志中能看到错误信息，如果nginx启动一秒又无法访问，日志又什么都没有，那大概就是80端口被占用，如果你不知道什么软件占用了80端口，那么直接重启就好 ruoyi的代码生成非常方便，前后端都会自动生成（生成之前的配置在页面一定要填写完整），在生成好的.js文件中的url与后台定义的接口Url除了查询方法外其他几乎都需要自己修改，否则无法使用 Nginx或ruoyi后端打包成jar后注册成服务（电脑重启前后端都不需要手动启动项目就能直接访问）

附带一份RuoYi的扩展项目，自己复制到一个.html中看（我用的就是版的ruoyi）：

名称说明地址
RuoYi-Vue3RuoYi-Vue的前端（Vue3 Element Plus Vite）版本https://github.com/yangzongzhuan/RuoYi-Vue3
https://gitee.com/y_project/RuoYi-Vue
RuoYi-Vue3RuoYi-Vue的前后端分离版本（前后端代码在一块的官网地址ruoyi-ui就是前端，其他是后端）https://gitee.com/y_project/RuoYi-Vue
RuoYi-AppRuoYi-Vue的移动端版本https://gitee.com/y_project/RuoYi-App
RuoYi-Vue-fastRuoYi-Vue单应用版本https://github.com/yangzongzhuan/RuoYi-Vue-fast
RuoYi-Vue-OracleRuoYi-Vue的Oracle版本https://github.com/yangzongzhuan/RuoYi-Vue-Oracle
RuoYi-Vue-Activiti集成Activiti 6.x工作流版本https://gitee.com/smell2/ruoyi-vue-activiti
RuoYi-Vue-Process闲鹿工作流版本https://gitee.com/calvinhwang123/RuoYi-Vue-Process
RuoYi-Vue-Flowable集成Flowable 6.x工作流版本https://gitee.com/tony2y/RuoYi-flowable
RuoYi-Vue-AntdvRuoYi-Vue的纯前端Antdv版本https://gitee.com/fuzui/RuoYi-Antdv
RuoYi-AiDex-SharpRuoYi-Vue的纯前端Antdv版本，重点进行了UI升级美化等https://gitee.com/big-hedgehog/aidex-sharp
RuoYi-Vue-AutoEERuoYi-Vue的Vite、ant-design-vue3版本https://gitee.com/Double_AutoEE/AutoEE
RuoYi-Vue-SqlserverRuoYi-Vue的Sqlserver版本，集成CAS、P6spy等https://gitee.com/MaShangYouLi/RuoYi-Vue-SQLServer-C
RuoYi-Vue-Postgresql-masterRuoYi-Vue的Postgres版本https://gitee.com/suxia2/RuoYi-Vue-Postgresql （ruoyi3.8.5）
https://gitee.com/find_the_unexpected_treasure/ruoyi-postgre（ruoyi3.8.4）
RuoYi-Vue-SqlserverRuoYi-Vue的Sqlserver版本https://gitee.com/wpp011/RuoYi-Vue-SQLServer
RuoYi-Vue-SqlserverRuoYi-Vue的Sqlserver版本https://gitee.com/Sxile/RuoYi-Vue-Sqlserver
RuoYi-Vue-ReactRuoYi-Vue的React版本https://gitee.com/whiteshader/ruoyi-react
RuoYi-Vue-NETRuoYi-Vue的.NET5版本https://gitee.com/izory/ZrAdminNetCore
RuoYi-Vue3-NETRuoYi-Vue3的.NET6版本https://gitee.com/ccnetcore/yi
RuoYi-Vue-RustRuoYi-Vue的Rust版本https://github.com/mengyou658/actix_admin
RuoYi-Vue-Plus集成Mybatis-Plus、Hutool、OSS存储、分布式锁等组件https://gitee.com/dromara/RuoYi-Vue-Plus
RuoYi-Vue-PlusRuoYi-Vue3的腾讯开源框架TDesign UI框架https://gitee.com/zhangmrit/RuoYi-Vue-Plus
RuoYi-Vue-Super集成Websocket、Flowable、Xdh-Map、可视化开发等组件https://gitee.com/rainsuper/RuoYi-Vue-Super
RuoYi-Vue-Source集成Flowable、Websocket、报表、支付等组件的零代码版本https://gitee.com/open-source-byte/source-vue
RuoYi-Vue-Nocode集成Activiti7、Mongodb、Form-Making等组件的零代码版本https://gitee.com/atlus/ruoyi-vue-nocode
RuoYi-Vue-Plus-Activiti集成的activiti工作流版本https://gitee.com/sgs98/RuoYi-Vue-Plus-Activiti
RuoYi-Vue-Plus-Flowable集成的flowable工作流版本https://gitee.com/KonBAI-Q/ruoyi-flowable-plus
RuoYi-Vue-YuXi集成Sa-Token、magic-api、Hutool 等组件https://gitee.com/histoneUp/yu-xi-admin
RuoYi-Vue-S集成Mybatis-Plus、多租户、动态数据权限、OSS云存储等组件https://gitee.com/sunseagear/RuoYi-Vue-S
RuoYi-Vue-MultiTenantRuoYi-Vue的多租户版本https://gitee.com/leslie8195/ruo-yi-vue-multi-tenant
RuoYi-Vue-SaTokenRuoYi-Vue的SaToken版本https://gitee.com/wangming123456/ruoyi-satoken
RuoYi-Vue3-TsRuoYi-Vue3的Ts版本https://gitee.com/lyforvue/ruoyi_vue3_ts
RuoYi-Vue3-TsRuoYi-Vue3的Ts版本https://github.com/zzh948498/RuoYi-Vue3-ts
RuoYi-Vue-MobileRuoYi-Vue的移动端Uniapp版本，集成uView2.0+u-charts等组件https://gitee.com/yinm/RuoYi-Mobile
RuoYi-Vue-UniappRuoYi-Vue的移动端Uniapp版本https://gitee.com/big-hedgehog/ruoyi-uniapp
RuoYi-Vue-FlutterRuoYi-Vue的移动端Flutter版本https://github.com/420136525/ruoyi_flutter_app
RuoYi-Vue-UniappRuoYi-Vue的移动端Uniapp版本包括权限认证、字典翻译等https://gitee.com/_q494000616q_/ruoyi-uniapp
RuoYi-R2dbcRuoYi-Vue的R2dbc版本https://gitee.com/sn-yang/ruoyi-webflux-r2dbc-vue3
RuoYi-Vue-HibernateRuoYi-Vue的Hibernate版本https://gitee.com/inprise80/ruoyi-vue-hibernate2
RuoYi-SqliteRuoYi-Vue的Sqlite版本https://gitee.com/tianyv/ruoyi-sqlite3
RuoYi-JpaRuoYi-Vue的jpa版本https://gitee.com/bright-sword-40/ruoyi-jpa
RuoYi-damengRuoYi-Vue的达梦DM8的版本https://gitee.com/azun/ruoyi-dameng
RuoYi-metaeeRuoYi-Vue + MybatisPlus + dynamic-datasource + Knife4j等https://gitee.com/metaee/metaee-boot
RuoYi-Mybatis-PlusRuoYi-Vue + MybatisPlus 纯净版、项目全栈脚手架https://gitee.com/tellsea/ruoyi-vue-plus
RuoYi-Mybatis-PlusRuoYi-Vue + MybatisPlus + Lombok + 国产数据库适配https://gitee.com/sou100/ruoyi-mybatis-plus
RuoYi-Vue-Plus-SqlserverRuoYi-Vue + MybatisPlus + Sqlserver版本https://gitee.com/qu_bing/ruoyi-vue-plus-sqlserver
RuoYi-Vue-Plus-TdengineRuoYi-Vue + MybatisPlus + Tdengine版本https://gitee.com/zhangbg/ruoyi-plus-tdengine
RuoYi-Vue-FluentMyBatisRuoYi-Vue版，集成Fluent-Mybatis，适配代码生成器https://lemonbx.coding.net/public/ruoyi/ruoyi-vue-fluentmybatis/git
RuoYi-Vue-tkmapperRuoYi-Vue的tk.mapper版本https://gitee.com/caiwl_admin/ruoyi-vue-tkmapper
RuoYi-Vue-Nway-JDBCRuoYi-Vue的Nway-JDBC版本https://gitee.com/nway/RuoYi-Vue/tree/nway
RuoYi-Vue-NutzRuoYi-Vue的Nutz框架版本https://github.com/TomYule/ruoyi-vue-nutz
RuoYi-Vue-Postgresql-ElectronRuoYi-Vue的Postgresql的桌面版，要集成了web桌面打印https://gitee.com/suxia2/ruo-yi-vue-postgresql-electron
RuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://gitee.com/suxia2/RuoYi-Vue-Postgresql
RuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://gitee.com/cheenmo/ruoyi-vue-pg
RuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://gitee.com/p0mp0k0/RuoYi-Vue-Postgresql
RuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://github.com/Mr8god/RuoYi-Vue-PostgreSQL
RuoYi-Vue-python若依Python语言版本https://gitee.com/liqianglog/django-vue-admin/tree/v1.1.2
RuoYi-Vue-Go若依Go语言版本https://gitee.com/tiger1103/gfast/tree/os-v2
RuoYi-Vue3-Go基于RuoYi-Vue3的Go语言版本https://gitee.com/smell2/BaiZe
RuoYi-Vue3-vuecli基于RuoYi-Vue3的vue-cli版本https://gitee.com/cicada-singing/ruoyi-vue3-cli
RuoYi-Vue-wind集成Mybatis-Plus、shardingsphere、lombok等组件https://gitee.com/zhangmrit/RuoYi-Vue
RuoYi-Vue-Mybatis-plus集成Mybatis-Plus、EasyCaptcha、lombok及模块调整https://gitee.com/nottyjay/ruoyi-vue-mybatis-plus
RuoYi-Vue-BeetlSql集成Lombok+BeetlSql3.X+Undertowhttps://gitee.com/JavaLionLi/RuoYi-Vue-BeetlSql
RuoYi-Vue-Keycloak集成了keycloak单点登录功能https://gitee.com/greetings_gitee/RuoYiVueKeycloak
RuoYi-Vue3-Cas集成了RuoYi-Vue3 + CAS5.3.16单点登录功能https://gitee.com/mikulove666/ruoyi-vue-cas
RuoYi-Vue-Cas集成了spring-security-cas单点登录功能https://gitee.com/ggxforever/RuoYi-Vue-cas
RuoYi-Vue-Gradle集成Gradle + Kotlin版本https://gitee.com/yizems/RuoYi-Vue/tree/gradle-kotlin
RuoYi-Antdv-Flowable-plus美化Antv + MybatisPlus + Flowable版本https://gitee.com/lwq8886666/ruo-yi-antdv-flowable-plus
RuoYi-Vue-UUIDRuoYi-Vue修改主键为UUID版本https://gitee.com/allen056/ruo-yi-vue-uuid
RuoYi-Vue_Oauth2.0集成Oauth2.0实现登录，认证授权https://pan.baidu.com/s/1OVgEAe9mwBc6kkKHxX8ZCA（提取码: c475）
RuoYi-Vue-Atomikos集成atomikos分布式事务https://gitee.com/zsiyang/ruoyi-vue-atomikos
RuoYi-Vue-Report集成数据大屏、地图示例（热力图、区域图、检索等）https://gitee.com/greenant/Ruoyi-vue-Report
RuoYi-Vue-Process基于闲鹿工作流版本的扩展https://gitee.com/laya1989/ruo-yi-vue-process-3.4.0
RuoYi-Vue-YunaiV集成文件服务、apollo、监控、分布式锁等组件https://github.com/YunaiV/ruoyi-vue-pro
RuoYi-Vue-Swagger集成Swagger-bootstrap-ui，支持代码生成Api...https://gitee.com/juniorRay/ruoyi-vue-swagger
RuoYi-Vue-GoogleTotp集成google authenticator，支持角色树形模式...https://gitee.com/richardgong1987/RuoYi-baby
RuoYi-Vue-expand集成Ureport2、积木报表、雪花主键https://gitee.com/magb/ruoyi-vue-expand
RuoYi-Vue-JFinal集成JFinal作为web框架https://gitee.com/ycss/habit
RuoYi-hh-vue基于若依模块拆分，freemarker改造，并优化，自研工作流https://gitee.com/min290/hh-vue
RuoYi-mymx2基于若依核心工具包、自动配置、多租户https://gitee.com/mymx2/RuoYi-Vue
RuoYi-Tellsea基于若依的Java全栈脚手架https://gitee.com/tellsea/project-system
RuoYi-Vue-uniapp-wx基于若依后台管理系统的微信小程序https://gitee.com/rahman/AbuCoder-RuoYi-Vue-uniapp-wx
RuoYi-Vue-wechat-mp集成公众号模板，微信网页授权认证https://gitee.com/suimu/ruoyi-wechat-mp
RuoYi-Vue-Blog基于RuoYi-Vue的博客网站https://gitee.com/Ning310975876/ruo-yi-vue-blog
RuoYi-Vue-KMS基于RuoYi-Vue的知识管理系统https://gitee.com/chenzuheng001/RuoYi-Vue-KMS
RuoYi-Vue-MES基于RuoYi-Vue的MES生产执行管理系统https://gitee.com/kutangguo/ktg-mes
RuoYi-Vue-CMS基于RuoYi-Vue的CMS内容管理系统https://gitee.com/liweiyi/RuoYi-Vue-CMS
RuoYi-link-wechat基于人工智能的企业微信 SCRM 综合解决方案https://gitee.com/LinkWeChat/link-wechat
RuoYi-V-IM基于若依超轻量级聊天软件https://gitee.com/lele-666/V-IM
RuoYi-Vue-easy-report基于若依在线Web报表工具平台https://gitee.com/devzwd/easy-report
RuoYi-wx基于若依微信管理平台https://gitee.com/joolun/JooLun-wx
RuoYi-wxopen基于若依微信服务商平台https://gitee.com/mxiaoguang/wxopen
RuoYi-kwswitch基于若依智能开关平台https://gitee.com/kerwincui/kwswitch
RuoYi-ewem基于若依溯源防伪系统https://gitee.com/qrcode_project/ewem
RuoYi-zhunian基于若依支付系统https://gitee.com/zhunian/smart-pay-plus-vue
RuoYi-wumei基于若依智能家居系统https://gitee.com/kerwincui/wumei-smart
RuoYi-tanhuihuang基于若依电影视频系统https://gitee.com/tanhuihuang/ruoyi-media
RuoYi-knowledgegraph基于可视化知识图谱https://gitee.com/liaoquefei/knowledgegraph
RuoYi-payshop基于若依多商户商城管理系统https://gitee.com/JiaGou-XiaoGe/payshop
RuoYi-shop基于若依和litemall的商城后台融合项目https://gitee.com/hgl168918/ruoyi-shop
RuoYi-crm基于若依平的多租户CRM系统https://gitee.com/jundee/RuoyiCRM
RuoYi-zhaoxinpms基于若依的智慧物业系统https://gitee.com/fanhuibin1/zhaoxinpms
RuoYi-community基于若依的智慧社区系统https://gitee.com/hebei-zhiyu-network/community-web
RuoYi-huohuzhihui基于若依的智慧园区一卡通https://gitee.com/huohuzhihui/ykt
RuoYi-manager基于若依的内部管理软件https://gitee.com/jetlion-software/zs-manager
RuoYi-Vue-SmsLogin集成短信登录功能https://github.com/chougui123/RuoYi-Vue-SmsLogin
RuoYi-fastbuild-factory若依框架包名修改器https://gitee.com/yinm/fastbuild-factory
RuoYi-common-tools若依框架包名修改器https://gitee.com/lpf_project/common-tools

tags: 前后端分离 nginx
其他相关
考证青年

4.Nginx配置文件Nginx.conf_虚拟主机配置规则

01-01 28
考证青年

私活利器:Java企业级快速开发框架RuoYi前后端分离版本登录及登录扩展

12-20 25
考证青年

宝塔面板Nginx配置wss

12-16 42
考证青年

nginx文件下载限流+jmeter压测

10-26 23
考证青年

三、Web 前后端分离的意义大吗？

09-15 34
考证青年

springboot-整合vue，nginx前后端分离部署

09-14 34
最新文章

利用区块链等技术，加强对交通运输信用信息的归集共享和分析应用

01-11 328

印尼西爪哇梳邦县发生山体滑坡 已经导致2人死亡

01-11 417

【SpringBoot笔记10】Spring中Bean的6种作用域

01-11 309

ARS548 ARS549RDI 80GHZ毫米波雷达达学习笔记（一)

01-11 339

叠氮PEG修饰二硒化钨 (N3-WSe2；azide

01-11 377

ATFX：黑海运粮遭俄暂停，小麦期货开盘跳涨

01-11 286

关于我们

最火推荐

小编推荐

联系我们

版权声明：本站内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 88@qq.com 举报，一经查实，本站将立刻删除。备案号：桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了