1. 程式人生 > >vue-route二級頁面開啟後,刷新出現404現象的解決方案

vue-route二級頁面開啟後,刷新出現404現象的解決方案

 

問題原因:
重新整理頁面時訪問的資源在服務端找不到,因為vue-router設定的路徑不是真實存在的路徑。
如上的404現象,是因為在nginx配置的根目錄/Data/app/xqsj_wx/dist下面壓根沒有loading這個真實資源存在,這些訪問資源都是在js裡渲染的。

服務端nginx的一開始配置如下(假設域名為:testwx.wangshibo.com):
[[email protected] ~]# 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就在下面對應位置替換),正確配置如下(新增下面標紅內容):
[[email protected] ~]# 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)]