神刀安全网

react,vue等部署单页面项目时,访问刷新出现404问题


1. 问题描述:

上个礼拜开发了个简单的单页面移动端页面,地址,然后进入到文章详情,刷新浏览器,发现浏览器出现404了,what happen? 如下图:

react,vue等部署单页面项目时,访问刷新出现404问题

image.png

2. 问题原因:

刷新页面时访问的资源在服务端找不到,因为react-router设置的路径不是真实存在的路径。
如上的404现象,是因为在nginx配置的根目录/alidata/www/mgeekjc下面压根没有article这个真实资源存在,这些访问资源都是在js里渲染的。

服务端nginx的一开始配置如下(假设域名为:m.geekjc.com):

server {     listen      80;     server_name m.geekjc.com;          gzip on;     gzip_min_length 1k;     gzip_buffers 4 16k;     #gzip_http_version 1.0;     gzip_comp_level 2;     gzip_types text/plain application/javascript application/x-javascript text/javascript application/json text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;     gzip_vary off;     gzip_disable "MSIE [1-6]/.";       #charset koi8-r;     #access_log  /var/log/nginx/log/host.access.log  main;          location / {         root /alidata/www/mgeekjc;         index index.html; } 

如上出现404的原因是由于在这个域名根目录/Data/app/xqsj_wx/dist下面压根就没有article这个真实目录存在。

3. 问题解决:

在nginx配置里添加react-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下:

server {     listen      80;     server_name m.geekjc.com;          gzip on;     gzip_min_length 1k;     gzip_buffers 4 16k;     #gzip_http_version 1.0;     gzip_comp_level 2;     gzip_types text/plain application/javascript application/x-javascript text/javascript application/json text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;     gzip_vary off;     gzip_disable "MSIE [1-6]/.";       #charset koi8-r;     #access_log  /var/log/nginx/log/host.access.log  main;          location / {         root /alidata/www/mgeekjc;         try_files $uri $uri/ @router;         index index.html;     }              location @router{         rewrite ^.*$ /index.html last;     }      #error_page  404              /404.html;      # redirect server error pages to the static page /50x.html     #     error_page   500 502 503 504  /50x.html;     location = /50x.html {         root   /usr/share/nginx/html;     }  } 

重启nginx后,问题就迎刃而解了。
如图:

react,vue等部署单页面项目时,访问刷新出现404问题

image.png

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » react,vue等部署单页面项目时,访问刷新出现404问题

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址