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

手把手教你部署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后页面登录】启动成功后会自动打开浏览器，登录即可正常使用以下是打包ruoyi前端后放入Nginx中启动前端打包
npm run build:prod
2. 把打包后的dist文件夹移动到nginx下的html文件夹下：
3. 修改nginx的配置（nginx\conf\nginx.conf）：

worker_processes1;events {worker_connections1024;}http {includemime.types;default_typeapplication/octet-stream;sendfileon;keepalive_timeout65;server {listen80; #前端项目的端口server_namelocalhost;location / {#（html/dist即可 ， 代表在nginx根目录下的html中dist文件夹）roothtml/dist; #vue前端项目打包后的dist文件夹的地址的路径indexindex.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_page500 502 503 504/50x.html;location = /50x.html {roothtml;}}}

解决部署到服务器上的Nginx后页面登录后点击注销显示页面的修复版配置：

 server {listen81; #前端项目的端口server_namelocalhost;root html/ruoyi-vue ;#代表在nginx根目录下的html/ruoyi-vue文件夹，ruoyi-vue是我的改名，原本叫distlocation / {try_files $uri $uri/ @router; #解决404问题的关键行indexindex.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_page500 502 503 504/50x.html;location = /50x.html {roothtml;}}

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）：

th{background-color: #9ac1dd;}tr:nth-child(even) {background-color: #9addc5;}名称说明地址RuoYi-Vue3RuoYi-Vue的前端（Vue3 Element Plus Vite）版本https://github.com/yangzongzhuan/RuoYi-Vue3
https://gitee.com/y_project/RuoYi-VueRuoYi-Vue3RuoYi-Vue的前后端分离版本（前后端代码在一块的官网地址ruoyi-ui就是前端 ， 其他是后端）https://gitee.com/y_project/RuoYi-VueRuoYi-AppRuoYi-Vue的移动端版本https://gitee.com/y_project/RuoYi-AppRuoYi-Vue-fastRuoYi-Vue单应用版本https://github.com/yangzongzhuan/RuoYi-Vue-fastRuoYi-Vue-OracleRuoYi-Vue的Oracle版本https://github.com/yangzongzhuan/RuoYi-Vue-OracleRuoYi-Vue-Activiti集成Activiti 6.x工作流版本https://gitee.com/smell2/ruoyi-vue-activitiRuoYi-Vue-Process闲鹿工作流版本https://gitee.com/calvinhwang123/RuoYi-Vue-ProcessRuoYi-Vue-Flowable集成Flowable 6.x工作流版本https://gitee.com/tony2y/RuoYi-flowableRuoYi-Vue-AntdvRuoYi-Vue的纯前端Antdv版本https://gitee.com/fuzui/RuoYi-AntdvRuoYi-AiDex-SharpRuoYi-Vue的纯前端Antdv版本，重点进行了UI升级美化等https://gitee.com/big-hedgehog/aidex-sharpRuoYi-Vue-AutoEERuoYi-Vue的Vite、ant-design-vue3版本https://gitee.com/Double_AutoEE/AutoEERuoYi-Vue-SqlserverRuoYi-Vue的Sqlserver版本，集成CAS、P6spy等https://gitee.com/MaShangYouLi/RuoYi-Vue-SQLServer-CRuoYi-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-SQLServerRuoYi-Vue-SqlserverRuoYi-Vue的Sqlserver版本https://gitee.com/Sxile/RuoYi-Vue-SqlserverRuoYi-Vue-ReactRuoYi-Vue的React版本https://gitee.com/whiteshader/ruoyi-reactRuoYi-Vue-NETRuoYi-Vue的.NET5版本https://gitee.com/izory/ZrAdminNetCoreRuoYi-Vue3-NETRuoYi-Vue3的.NET6版本https://gitee.com/ccnetcore/yiRuoYi-Vue-RustRuoYi-Vue的Rust版本https://github.com/mengyou658/actix_adminRuoYi-Vue-Plus集成Mybatis-Plus、Hutool、OSS存储、分布式锁等组件https://gitee.com/dromara/RuoYi-Vue-PlusRuoYi-Vue-PlusRuoYi-Vue3的腾讯开源框架TDesign UI框架https://gitee.com/zhangmrit/RuoYi-Vue-PlusRuoYi-Vue-Super集成Websocket、Flowable、Xdh-Map、可视化开发等组件https://gitee.com/rainsuper/RuoYi-Vue-SuperRuoYi-Vue-Source集成Flowable、Websocket、报表、支付等组件的零代码版本https://gitee.com/open-source-byte/source-vueRuoYi-Vue-Nocode集成Activiti7、Mongodb、Form-Making等组件的零代码版本https://gitee.com/atlus/ruoyi-vue-nocodeRuoYi-Vue-Plus-Activiti集成的activiti工作流版本https://gitee.com/sgs98/RuoYi-Vue-Plus-ActivitiRuoYi-Vue-Plus-Flowable集成的flowable工作流版本https://gitee.com/KonBAI-Q/ruoyi-flowable-plusRuoYi-Vue-YuXi集成Sa-Token、magic-api、Hutool 等组件https://gitee.com/histoneUp/yu-xi-adminRuoYi-Vue-S集成Mybatis-Plus、多租户、动态数据权限、OSS云存储等组件https://gitee.com/sunseagear/RuoYi-Vue-SRuoYi-Vue-MultiTenantRuoYi-Vue的多租户版本https://gitee.com/leslie8195/ruo-yi-vue-multi-tenantRuoYi-Vue-SaTokenRuoYi-Vue的SaToken版本https://gitee.com/wangming123456/ruoyi-satokenRuoYi-Vue3-TsRuoYi-Vue3的Ts版本https://gitee.com/lyforvue/ruoyi_vue3_tsRuoYi-Vue3-TsRuoYi-Vue3的Ts版本https://github.com/zzh948498/RuoYi-Vue3-tsRuoYi-Vue-MobileRuoYi-Vue的移动端Uniapp版本，集成uView2.0+u-charts等组件https://gitee.com/yinm/RuoYi-MobileRuoYi-Vue-UniappRuoYi-Vue的移动端Uniapp版本https://gitee.com/big-hedgehog/ruoyi-uniappRuoYi-Vue-FlutterRuoYi-Vue的移动端Flutter版本https://github.com/420136525/ruoyi_flutter_appRuoYi-Vue-UniappRuoYi-Vue的移动端Uniapp版本包括权限认证、字典翻译等https://gitee.com/_q494000616q_/ruoyi-uniappRuoYi-R2dbcRuoYi-Vue的R2dbc版本https://gitee.com/sn-yang/ruoyi-webflux-r2dbc-vue3RuoYi-Vue-HibernateRuoYi-Vue的Hibernate版本https://gitee.com/inprise80/ruoyi-vue-hibernate2RuoYi-SqliteRuoYi-Vue的Sqlite版本https://gitee.com/tianyv/ruoyi-sqlite3RuoYi-JpaRuoYi-Vue的jpa版本https://gitee.com/bright-sword-40/ruoyi-jpaRuoYi-damengRuoYi-Vue的达梦DM8的版本https://gitee.com/azun/ruoyi-damengRuoYi-metaeeRuoYi-Vue + MybatisPlus + dynamic-datasource + Knife4j等https://gitee.com/metaee/metaee-bootRuoYi-Mybatis-PlusRuoYi-Vue + MybatisPlus 纯净版、项目全栈脚手架https://gitee.com/tellsea/ruoyi-vue-plusRuoYi-Mybatis-PlusRuoYi-Vue + MybatisPlus + Lombok + 国产数据库适配https://gitee.com/sou100/ruoyi-mybatis-plusRuoYi-Vue-Plus-SqlserverRuoYi-Vue + MybatisPlus + Sqlserver版本https://gitee.com/qu_bing/ruoyi-vue-plus-sqlserverRuoYi-Vue-Plus-TdengineRuoYi-Vue + MybatisPlus + Tdengine版本https://gitee.com/zhangbg/ruoyi-plus-tdengineRuoYi-Vue-FluentMyBatisRuoYi-Vue版，集成Fluent-Mybatis，适配代码生成器https://lemonbx.coding.net/public/ruoyi/ruoyi-vue-fluentmybatis/gitRuoYi-Vue-tkmapperRuoYi-Vue的tk.mapper版本https://gitee.com/caiwl_admin/ruoyi-vue-tkmapperRuoYi-Vue-Nway-JDBCRuoYi-Vue的Nway-JDBC版本https://gitee.com/nway/RuoYi-Vue/tree/nwayRuoYi-Vue-NutzRuoYi-Vue的Nutz框架版本https://github.com/TomYule/ruoyi-vue-nutzRuoYi-Vue-Postgresql-ElectronRuoYi-Vue的Postgresql的桌面版，要集成了web桌面打印https://gitee.com/suxia2/ruo-yi-vue-postgresql-electronRuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://gitee.com/suxia2/RuoYi-Vue-PostgresqlRuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://gitee.com/cheenmo/ruoyi-vue-pgRuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://gitee.com/p0mp0k0/RuoYi-Vue-PostgresqlRuoYi-Vue-PostgresqlRuoYi-Vue的Postgresql版本https://github.com/Mr8god/RuoYi-Vue-PostgreSQLRuoYi-Vue-python若依Python语言版本https://gitee.com/liqianglog/django-vue-admin/tree/v1.1.2RuoYi-Vue-Go若依Go语言版本https://gitee.com/tiger1103/gfast/tree/os-v2RuoYi-Vue3-Go基于RuoYi-Vue3的Go语言版本https://gitee.com/smell2/BaiZeRuoYi-Vue3-vuecli基于RuoYi-Vue3的vue-cli版本https://gitee.com/cicada-singing/ruoyi-vue3-cliRuoYi-Vue-wind集成Mybatis-Plus、shardingsphere、lombok等组件https://gitee.com/zhangmrit/RuoYi-VueRuoYi-Vue-Mybatis-plus集成Mybatis-Plus、EasyCaptcha、lombok及模块调整https://gitee.com/nottyjay/ruoyi-vue-mybatis-plusRuoYi-Vue-BeetlSql集成Lombok+BeetlSql3.X+Undertowhttps://gitee.com/JavaLionLi/RuoYi-Vue-BeetlSqlRuoYi-Vue-Keycloak集成了keycloak单点登录功能https://gitee.com/greetings_gitee/RuoYiVueKeycloakRuoYi-Vue3-Cas集成了RuoYi-Vue3 + CAS5.3.16单点登录功能https://gitee.com/mikulove666/ruoyi-vue-casRuoYi-Vue-Cas集成了spring-security-cas单点登录功能https://gitee.com/ggxforever/RuoYi-Vue-casRuoYi-Vue-Gradle集成Gradle + Kotlin版本https://gitee.com/yizems/RuoYi-Vue/tree/gradle-kotlinRuoYi-Antdv-Flowable-plus美化Antv + MybatisPlus + Flowable版本https://gitee.com/lwq8886666/ruo-yi-antdv-flowable-plusRuoYi-Vue-UUIDRuoYi-Vue修改主键为UUID版本https://gitee.com/allen056/ruo-yi-vue-uuidRuoYi-Vue_Oauth2.0集成Oauth2.0实现登录，认证授权https://pan.baidu.com/s/1OVgEAe9mwBc6kkKHxX8ZCA（提取码: c475）RuoYi-Vue-Atomikos集成atomikos分布式事务https://gitee.com/zsiyang/ruoyi-vue-atomikosRuoYi-Vue-Report集成数据大屏、地图示例（热力图、区域图、检索等）https://gitee.com/greenant/Ruoyi-vue-ReportRuoYi-Vue-Process基于闲鹿工作流版本的扩展https://gitee.com/laya1989/ruo-yi-vue-process-3.4.0RuoYi-Vue-YunaiV集成文件服务、apollo、监控、分布式锁等组件https://github.com/YunaiV/ruoyi-vue-proRuoYi-Vue-Swagger集成Swagger-bootstrap-ui，支持代码生成Api...https://gitee.com/juniorRay/ruoyi-vue-swaggerRuoYi-Vue-GoogleTotp集成google authenticator，支持角色树形模式...https://gitee.com/richardgong1987/RuoYi-babyRuoYi-Vue-expand集成Ureport2、积木报表、雪花主键https://gitee.com/magb/ruoyi-vue-expandRuoYi-Vue-JFinal集成JFinal作为web框架https://gitee.com/ycss/habitRuoYi-hh-vue基于若依模块拆分，freemarker改造，并优化，自研工作流https://gitee.com/min290/hh-vueRuoYi-mymx2基于若依核心工具包、自动配置、多租户https://gitee.com/mymx2/RuoYi-VueRuoYi-Tellsea基于若依的Java全栈脚手架https://gitee.com/tellsea/project-systemRuoYi-Vue-uniapp-wx基于若依后台管理系统的微信小程序https://gitee.com/rahman/AbuCoder-RuoYi-Vue-uniapp-wxRuoYi-Vue-wechat-mp集成公众号模板，微信网页授权认证https://gitee.com/suimu/ruoyi-wechat-mpRuoYi-Vue-Blog基于RuoYi-Vue的博客网站https://gitee.com/Ning310975876/ruo-yi-vue-blogRuoYi-Vue-KMS基于RuoYi-Vue的知识管理系统https://gitee.com/chenzuheng001/RuoYi-Vue-KMSRuoYi-Vue-MES基于RuoYi-Vue的MES生产执行管理系统https://gitee.com/kutangguo/ktg-mesRuoYi-Vue-CMS基于RuoYi-Vue的CMS内容管理系统https://gitee.com/liweiyi/RuoYi-Vue-CMSRuoYi-link-wechat基于人工智能的企业微信 SCRM 综合解决方案https://gitee.com/LinkWeChat/link-wechatRuoYi-V-IM基于若依超轻量级聊天软件https://gitee.com/lele-666/V-IMRuoYi-Vue-easy-report基于若依在线Web报表工具平台https://gitee.com/devzwd/easy-reportRuoYi-wx基于若依微信管理平台https://gitee.com/joolun/JooLun-wxRuoYi-wxopen基于若依微信服务商平台https://gitee.com/mxiaoguang/wxopenRuoYi-kwswitch基于若依智能开关平台https://gitee.com/kerwincui/kwswitchRuoYi-ewem基于若依溯源防伪系统https://gitee.com/qrcode_project/ewemRuoYi-zhunian基于若依支付系统https://gitee.com/zhunian/smart-pay-plus-vueRuoYi-wumei基于若依智能家居系统https://gitee.com/kerwincui/wumei-smartRuoYi-tanhuihuang基于若依电影视频系统https://gitee.com/tanhuihuang/ruoyi-mediaRuoYi-knowledgegraph基于可视化知识图谱https://gitee.com/liaoquefei/knowledgegraphRuoYi-payshop基于若依多商户商城管理系统https://gitee.com/JiaGou-XiaoGe/payshopRuoYi-shop基于若依和litemall的商城后台融合项目https://gitee.com/hgl168918/ruoyi-shopRuoYi-crm基于若依平的多租户CRM系统https://gitee.com/jundee/RuoyiCRMRuoYi-zhaoxinpms基于若依的智慧物业系统https://gitee.com/fanhuibin1/zhaoxinpmsRuoYi-community基于若依的智慧社区系统https://gitee.com/hebei-zhiyu-network/community-webRuoYi-huohuzhihui基于若依的智慧园区一卡通https://gitee.com/huohuzhihui/yktRuoYi-manager基于若依的内部管理软件https://gitee.com/jetlion-software/zs-managerRuoYi-Vue-SmsLogin集成短信登录功能https://github.com/chougui123/RuoYi-Vue-SmsLoginRuoYi-fastbuild-factory若依框架包名修改器https://gitee.com/yinm/fastbuild-factoryRuoYi-common-tools若依框架包名修改器https://gitee.com/lpf_project/common-tools