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

这样就能够看到了

相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js:从零开始构建后端服务
【10月更文挑战第42天】在数字时代的浪潮中,掌握一门后端技术对于开发者来说至关重要。Node.js,作为一种基于Chrome V8引擎的JavaScript运行环境,允许开发者使用JavaScript编写服务器端代码,极大地拓宽了前端开发者的技能边界。本文将从Node.js的基础概念讲起,逐步引导读者理解其事件驱动、非阻塞I/O模型的核心原理,并指导如何在实战中应用这些知识构建高效、可扩展的后端服务。通过深入浅出的方式,我们将一起探索Node.js的魅力和潜力,解锁更多可能。
|
27天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
44 1
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
25天前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
21天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
25天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
21天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
24天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
25天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
19 4

热门文章

最新文章

下一篇
DataWorks