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

?

問題原因：
刷新頁(yè)面時(shí)訪問的資源在服務(wù)端找不到，因?yàn)関ue-router設(shè)置的路徑不是真實(shí)存在的路徑。
如上的404現(xiàn)象，是因?yàn)樵趎ginx配置的根目錄/Data/app/xqsj_wx/dist下面壓根沒有l(wèi)oading這個(gè)真實(shí)資源存在，這些訪問資源都是在js里渲染的。

服務(wù)端nginx的一開始配置如下（假設(shè)域名為：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;

}

如上出現(xiàn)404的原因是由于在這個(gè)域名根目錄/Data/app/xqsj_wx/dist下面壓根就沒有l(wèi)oading這個(gè)真實(shí)目錄存在。

問題解決：
在nginx配置里添加vue-route的跳轉(zhuǎn)設(shè)置（這里首頁(yè)是index.html，如果是index.php就在下面對(duì)應(yīng)位置替換），正確配置如下（添加下面標(biāo)紅內(nèi)容）：
[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后，問題就迎刃而解了。

[總結(jié)：nginx配置文件里一定要定義access和error日志，出現(xiàn)問題要第一時(shí)間查看日志(error)]

轉(zhuǎn)載于:https://www.cnblogs.com/sweeeper/p/11459693.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。