vue react 路由history模式刷新404問題解決方案

vue單頁因微信分享和自動登錄需要，對於URL中存在’#’的地址，處理起來比較坑。用history模式就不會存在這樣的問題。但是換成history模式，就會有個新的問題，就是頁面刷新后，頁面就無法顯示了（404）。對於這個問題，我們只需要在服務器配置如果URL匹配不到任何靜態資源，就跳轉到默認的index.html。
我這里是針對nginx的配置，總結如下：
方案一 （這種方式容易被第三方劫持)

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        error_page 404 /index.html;
}

方案二

    location /{
        root   /xxx/dist;
        index  index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;    //    /index.html前面是有空格的 6             break;
        }
    }

方案三  vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html

  server {
        listen       8888;#默認端口是80，如果端口沒被占用可以不用修改
        server_name  localhost;
        root        /xxx/dist;#vue項目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
            index  index.html index.htm;
        }
        #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
        #因此需要rewrite到index.html中，然后交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;    /index.html前面有空格 13         }
        #.......其他部分省略
  }

配置詳解：

try_files 是指當用戶請求url資源時 www.xxx.com/xxx，try_files 會到硬盤資源根目錄里找 xxx。如果存在名為 xxx 的文件就返回，如果找不到在找名為 xxx 的目錄，再找不到就會執行@router。（$uri指找文件， $uri/指找目錄）

rewrite是nginx中的重定向指令。^.*$ 是重定向規則。/index.html重定向路徑。