VUE 項目刷新路由指向index.html

背景描述：

VUE 項目經過 npm run bulid 生成靜態文件上傳到服務器后，當我們切換路由並刷新頁面，nginx 服務器會報 502 或者 404 錯誤。

原因分析：

我猜測是因為在 VUE 項目中，路由是利用H5的 history ，看起來頁面 url 發生了變化，其實根本就在同一個頁面。簡而言之，除了根路由之外的路由並不是有效的 url，所以直接刷新頁面並不能 get 到對應的內容。

解決方案：

通過 nginx 配置，讓所有頁面回到根路由。

        location / {

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;

                proxy_set_header X-Nginx-Proxy true;

                proxy_pass http://blogfront;
                proxy_redirect off;

                rewrite ^(.*)$ /index.html;
        }

關於如何配置 nginx，可以參考這篇文章。

這里主要說一下最后一行，它表明在根路由下，所有頁面路徑都回到 /index.html。