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

轉載于:https://www.cnblogs.com/sweeeper/p/11459693.html

總結

以上是生活随笔為你收集整理的vue-route+webpack部署单页路由项目，访问刷新出现404问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。