若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加

简介: 若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加

修改好若依项目之后,只能访问后端的接口,前端不显示咋解决?参考资料:

参考资料:

⑤【若依Vue前后端分离版本】如何将若依项目部署到Linux服务器让所有人都可以访问_哔哩哔哩_bilibili

在vue.config.js文件中的映射路径要跟后端匹配

这个设置上域名

到Ngnix配置代理

这里改成root

设80不用加端口号,server_name设置域名

直接复制过去

把他删掉

root是前端路径

这个前端就配置完成了

这是前端Ngnix

正式模式会在prod-api下设置

后端Ngnix要修改主机IP和端口

完整写成这样

重启Ngnix的服务

现在访问成功了

这样写的配置就能够访问页面成功了

Ngnix的相关的配置文件,Ngnix的初始化资料

user  www;
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;
events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_max_body_size 100m;
 
    #用于tomcat反向代理,解决nginx 504错误
 
    proxy_connect_timeout 7200; #单位秒
 
    proxy_send_timeout 7200; #单位秒
 
    proxy_read_timeout 7200; #单位秒
 
    proxy_buffer_size 16k;
 
    proxy_buffers 4 64k;
 
    proxy_busy_buffers_size 128k;
 
    proxy_temp_file_write_size 128k;
    # ps:以timeout结尾配置项时间要配置大点
    server {
        listen       80;
        server_name  localhost;
        return 301 https://lingyidianke.com$request_uri;
        charset utf-8;
        location / {
                    root   /home/myProject/ruoyi-vue/dist;
                    try_files $uri $uri/ /index.html;
                    index  index.html index.htm;
                }
        # location /admin/ {
        #   alias /home/myProject/ruoyi-vue/dist;
        #   try_files $uri $uri/ /admin/index.html;
        #   index index.html index.html;
        # }
        # location @dsrouter {
        #   rewrite ^/(admin)/(.+)$ /$1/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:8083/;
}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    server {
       #SSL 默认访问端口号为 443
       listen 443 ssl;
       #请填写绑定证书的域名
       server_name lingyidianke.com;
       #请填写证书文件的相对路径或绝对路径
       ssl_certificate lingyidianke.com_bundle.crt;
       #请填写私钥文件的相对路径或绝对路径
       ssl_certificate_key lingyidianke.com.key;
       ssl_session_timeout 5m;
       #请按照以下协议配置
       ssl_protocols TLSv1.2 TLSv1.3;
       #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
       ssl_prefer_server_ciphers on;
   charset utf-8;
      location / {
        root   /home/myProject/ruoyi-vue/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
      }
        # location /admin/ {
        #   alias /home/myProject/ruoyi-vue/dist;
        #   try_files $uri $uri/ /admin/index.html;
        #   index index.html index.html;
        # }
  # location /admin/ {
  #         alias /home/myProject/ruoyi-vue/dist;
  #         try_files $uri $uri/ @dsrouter;
  #         index index.html;
  #       }
  # location @dsrouter {
  #         rewrite ^/(admin)/(.+)$ /$1/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:8083/;
   }
   
   error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }
 
}

这样就能够看到了

相关文章
|
小程序 安全 关系型数据库
专业打造一款圈子源码软件系统 / 后端 PHP 搭建部署一样实现利益化
本教程详解基于PHP后端与Uni-app的小程序开发全流程,涵盖技术选型、环境搭建、源码导入、接口对接及功能实现。采用Laravel/Symfony框架,结合MySQL/PostgreSQL数据库,使用WebSocket实现实时通信,并集成IM SDK实现音视频聊天。前端使用Uni-app开发,支持跨平台运行。教程包含完整部署流程与安全优化方案,助力快速搭建高性能、安全稳定的小程序系统。
809 5
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
539 1
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
634 2
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
429 4
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16842 23
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
862 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
809 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
9371 4
|
存储 缓存 负载均衡
后端开发中的性能优化策略
本文将探讨几种常见的后端性能优化策略,包括代码层面的优化、数据库查询优化、缓存机制的应用以及负载均衡的实现。通过这些方法,开发者可以显著提升系统的响应速度和处理能力,从而提供更好的用户体验。
728 6
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
867 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡