vue刷新404

Euphoria 發(fā)布于2019-08-26 18:18 / 3174人閱讀

摘要：部署完成后，訪問首頁沒問題，從首頁里打開二級(jí)頁面沒問題，但是所有的二級(jí)頁面打開后，再次刷新，就會(huì)出現(xiàn)現(xiàn)象問題原因刷新頁面時(shí)訪問的資源在服務(wù)端找不到，因?yàn)樵O(shè)置的路徑不是真實(shí)存在的路徑。

1. 問題描述

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

2. 問題原因：

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

3. 解決方法：

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

location / {
    try_files $uri $uri/ @router;
    index index.html;
}

location @router {
    rewrite ^.*$ /index.html last;
}

GPU云服務(wù)器云服務(wù)器 cdn刷新緩存報(bào)404 網(wǎng)站404 打開404 404

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110182.html

相關(guān)文章

vue路由history模式刷新頁面出現(xiàn)404問題

摘要：模式下，中存在，用模式就能解決這個(gè)問題。但是模式會(huì)出現(xiàn)刷新頁面后，頁面出現(xiàn)。解決的辦法是用配置一下。 vue hash模式下，URL中存在#，用history模式就能解決這個(gè)問題。但是history模式會(huì)出現(xiàn)刷新頁面后，頁面出現(xiàn)404。解決的辦法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html...

sanyang 2019-07-25 14:28 評(píng)論0 收藏0
42. Vue、React 等前端項(xiàng)目部署，刷新 404 問題解決方案

摘要：發(fā)現(xiàn)路徑下是靜態(tài)文件的目錄，不是的目錄沒有文件，就會(huì)規(guī)則，返回這樣瀏覽器拿到之后，開始加載其中的前端路由部分這時(shí)候就會(huì)在前端路由中找到匹配規(guī)則同理也可以寫在前端路由中了首發(fā)于我的github博客, 歡迎關(guān)注nginx 匹配的 try_file 與前端路由的優(yōu)先級(jí)問題場(chǎng)景描述: 訪問www.abc.com，之后點(diǎn)擊界面里面的logout，前端路由處理，跳轉(zhuǎn)到www.abc.c...

caiyongji 2019-07-25 14:38 評(píng)論0 收藏0
配置nginx解決vue路由history模式下刷新404問題

摘要：在路由模式為的時(shí)候，刷新頁面會(huì)出現(xiàn)問題。我們只需要在服務(wù)器配置如果匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認(rèn)的。表示你監(jiān)聽的端口號(hào)打包后的文件夾目錄在vue路由模式為history的時(shí)候，刷新頁面會(huì)出現(xiàn)404問題。我們只需要在服務(wù)器配置如果URL匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認(rèn)的index.html。 server { listen 8105; // 表示你nginx監(jiān)聽...

stormzhang 2019-07-25 14:27 評(píng)論0 收藏0
vue router 刷新404問題

摘要：?jiǎn)栴}描述單頁面應(yīng)用的項(xiàng)目，設(shè)置模式為。可以跳轉(zhuǎn)但刷新了頁面，則顯示為。但是這種很丑，也不符合對(duì)的使用習(xí)慣。所以，需要使用另外一個(gè)叫模式來實(shí)現(xiàn)跳轉(zhuǎn)而無須重新加載頁面。服務(wù)器配置服務(wù)器配置 1. 問題描述單頁面應(yīng)用的vue項(xiàng)目，設(shè)置router模式為history。可以跳轉(zhuǎn)但刷新了頁面，則顯示為404。 vue-router的默認(rèn)hash模式使用URL的hash來模擬一個(gè)完整的URL...

zilu 2019-08-23 14:34 評(píng)論0 收藏0
vue項(xiàng)目路由在history模式下布置在Tomcat下解決刷新404問題

摘要：首先打包之前需要修改文件夾下的其次記得要添加路由頁面在的下的前端文件夾下新建文件夾，并在該文件夾下建立文件，具體內(nèi)容如下 1、首先打包之前需要修改config文件夾下的index.js showImg(https://segmentfault.com/img/bVbnqP7?w=872&h=303); 2、其次記得要添加404路由頁面 showImg(https://segmentfa...

luckyyulin 2019-08-23 14:48 評(píng)論0 收藏0