×

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

96
极客教程
2017.11.14 19:18 字数 285

1. 问题描述:

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

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后,问题就迎刃而解了。
如图:


image.png
react生态
Web note ad 1