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的方式會被第三方劫持！！！