若依前后端分离前端部署nginx反向署理后革新页面失效及用户登录后404问题解 ...

问题背景

项目需要部署到服务器之后由第三方进行了反向署理，所以我们必须适配第三方的url。由于第一次部署固定好路由格式的前端项目，途中遇到了比较多的问题。
nginx配置（解决页面革新失效问题）

起首nginx.conf要配置正确，核心配置如下：

1.     server {
2.         listen       前端端口;
3.         server_name  服务器ip;
5.         #charset koi8-r;
7.         #access_log  logs/host.access.log  main;
9.         location / {
10.             root   dist所在目录/dist;
11.             try_files $uri $uri/ /index.html;
12.             index  index.html index.htm;
13.         }
15.        location /prod-api/{
16.                 proxy_set_header Host $http_host;
17.                 proxy_set_header X-Real-IP $remote_addr;
18.                 proxy_set_header REMOTE-HOST $remote_addr;
19.                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
20.                 proxy_pass 后端访问url;
21.         }
22. }

复制代码

注意点

• 服务器ip可以是署理之后的url
  
• try_files $uri $uri/ /index.html;可以让页面革新后重新定向，加上就能解决革新页面失效问题
  
• 若依前后端分离部署时带后缀/prod-api，定向时需要加上
  
• 后端访问url即在前端vue.config.js中，proxy里的[process.env.VUE_APP_BASE_API]中target后填写的url
  

用户登录后出现404

问题描述

用户登录后页面重定向到404页面，点击返回首页后才能进入到正常页面
问题解决

前端需要增设子路径，如：/app（参考若依文档->前端手册->应用路径）肯定要看文档！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。