若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口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;
       }
   }
 
}

这样就能够看到了

目录
打赏
0
0
0
0
42
分享
相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
124 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
111 23
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
57 9
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
58 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
17.6K star!后端接口零代码的神器来了,腾讯开源的ORM库太强了!
"🏆 实时零代码、全功能、强安全 ORM 库 🚀 后端接口和文档零代码,前端定制返回 JSON 的数据和结构"
怎么取消对project.private.config.json这个文件的git记录
通过以上步骤,您可以成功取消对 `project.private.config.json`文件的Git记录。这样,文件将不会被包含在未来的提交中,同时仍保留在您的工作区中。
73 28
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
924 1
记录一次后端接口抖动的排查过程
某天下午,测试新功能时发现页面接口偶尔变慢,平均十次调用中有三到四次出现3秒以上的延迟。排查了接口、数据库和服务器资源后未发现问题,最终锁定为K8s节点的负载均衡策略导致。测试环境仅有一个公网IP,SLB轮询四个Pod(其中三个为空),造成周期性延迟。移除空Pod后问题解决。
110 5
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
264 3

热门文章

最新文章