vue-route+webpack部署单页路由项目,访问刷新出现404问题
問題描述:
前端同事使用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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 打包后放在服务器上二级目录找不到解决办法
- 下一篇: linux配置环境jdk