VUE路由history模式坑記--NGINX

因微信分享和自動登陸須要，
對於URL中存在'#'的地址，處理起來比較坑（須要手動寫一些代碼來處理）。還有可能會有一些隱藏的問題沒被發現。

若是VUE能像其餘（JSP/PHP）系統的路徑同樣，就不存在這些問題了。

---

對於VUE的router[mode: history]模式在開發的時候，通常都不出問題。是由於開發時用的服務器爲node，Dev環境中天然已配置好了。

但對於放到nginx下運行的時候，天然還會有其餘注意的地方。總結以下：

在nginx裏配置瞭如下配置後， 可能首頁沒有問題，連接也沒有問題，但在點擊刷新後，頁面就沒法顯示了（404）

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;
    }

爲了解決404，須要經過如下兩種方式:
方式一

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        error_page 404 /index.html;
    }

方式二

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

這樣問題好像就能夠解決了。

此外，若是VUE應用沒有發佈在域名的目錄根下，好比[http://xxx.com/wx/]
那麼除了上述配置：

 

location /wx{

        root   /data/nginx/html;
        index  index.html index.htm;

        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

還應該在VUE項目裏把每一個路徑加上[/wx]這一段(或者指定base: '/wx/')，要不頁面會顯示爲空白：

以上幾種方案基本上已經能把坑填上了，若是還有其餘問題，好比瀏覽器版本低不支持什麼的，不要來問了。

但願你們使用rewrite 的方式進行處理，404的方式會被第三方劫持！！！