vue-route+webpack部署單頁路由項目，訪問刷新出現404問題

 

問題描述：
前端同事使用Vue.js框架，利用vue-route結合webpack編寫了一個單頁路由項目，運維協助在服務器端配置nginx。部署完成後，訪問首頁沒問題，從首頁裏打開二級頁面沒問題，可是全部的二級頁面打開後，再次刷新，就會出現404現象！以下：

 

問題緣由：
刷新頁面時訪問的資源在服務端找不到，由於vue-router設置的路徑不是真實存在的路徑。
如上的404現象，是由於在nginx配置的根目錄/Data/app/xqsj_wx/dist下面壓根沒有loading這個真實資源存在，這些訪問資源都是在js裏渲染的。

服務端nginx的一開始配置以下（假設域名爲：testwx.wangshibo.com）：
[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
         server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

         access_log /var/log/testwx.log main;

}

如上出現404的緣由是因爲在這個域名根目錄/Data/app/xqsj_wx/dist下面壓根就沒有loading這個真實目錄存在。

問題解決：
在nginx配置裏添加vue-route的跳轉設置（這裏首頁是index.html，若是是index.php就在下面對應位置替換），正確配置以下（添加下面標紅內容）：
[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
         server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

         access_log /var/log/testwx.log main;

         location / {
             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }

}

重啓nginx後，問題就迎刃而解了。

[總結：nginx配置文件裏必定要定義access和error日誌，出現問題要第一時間查看日誌(error)]