簡介

前端同事使用Vue.js框架，利用vue-route結(jié)合webpack編寫了一個單頁路由項目，運維協(xié)助在服務(wù)器端配置nginx。部署完成后，訪問首頁沒問題，從首頁里打開二級頁面沒問題，但是所有的二級頁面打開后，再次刷新，就會出現(xiàn)404現(xiàn)象！如下：

問題原因：

刷新頁面時訪問的資源在服務(wù)端找不到，因為vue-router設(shè)置的路徑不是真實存在的路徑。

如上的404現(xiàn)象，是因為在nginx配置的根目錄下面壓根沒有l(wèi)oading這個真實資源存在，這些訪問資源都是在js里渲染的。

原先配置：

[root@test-huanqiu ~]# cat /Data/app/nginx/conf/defaut.conf 

         server {
           listen 80;
           server_name www.newkdd.com;
           root /home/newkdd/www/;
           index index.html;
           access_log /var/log/testwx.log main;
        }

問題解決：

在nginx配置里添加vue-route的跳轉(zhuǎn)設(shè)置（這里首頁是index.html，如果是index.php就在下面對應(yīng)位置替換），正確配置如下（添加下面標紅內(nèi)```容）：

[root@test-huanqiu ~]# cat /Data/app/nginx/conf/default.conf 

         server {
           listen 80;
           server_name www.newkdd.com;
           root /home/newkdd/www/;
           index index.html;
           access_log /var/log/newkdd.log main;
           location / {
               try_files $uri $uri/ @router;
               index index.html;
           }
          location @router {
              rewrite ^.*$ /index.html last;
          }
     }

重啟nginx后，問題就迎刃而解了。