問題描述：
前端同事使用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)]