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

这样就能够看到了

相关文章
|
11天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
20天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
21天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
29天前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
70 2
|
1月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
38 1
|
2月前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
20 1
JavaScript基础知识-数组基于索引访问
|
1月前
|
前端开发 JavaScript 小程序
前端新人,入职新公司需要注意安装什么软件
前端新人,入职新公司需要注意安装什么软件
14 0
|
1月前
|
前端开发 Java Shell
后端项目打包上传服务器部署运行记录
后端项目打包上传服务器部署运行记录
28 0
|
2月前
|
存储 前端开发 API
探索后端技术:构建高效系统的关键路径
在数字化时代,后端技术作为软件架构的核心支柱,承载着处理数据逻辑、服务前端应用和确保系统稳定运行的重要职责。本文将深入浅出地介绍后端技术的基础知识、关键组件以及在实际项目中的应用实践,旨在为开发者提供一条清晰的学习路径,助力其构建高效、可扩展的后端系统。通过案例分析和最佳实践的分享,我们将揭示如何运用现代后端技术解决复杂业务问题,提升用户体验,并推动企业的数字化转型进程。
|
3月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
76 1