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

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