1. 程式人生 > >vue路由history模式重新整理404問題解決方案

vue路由history模式重新整理404問題解決方案

vue單頁因微信分享和自動登入需要,對於URL中存在’#’的地址,處理起來比較坑。用history模式就不會存在這樣的問題。但是換成history模式,就會有個新的問題,就是頁面重新整理後,頁面就無法顯示了(404)。對於這個問題,我們只需要在伺服器配置如果URL匹配不到任何靜態資源,就跳轉到預設的index.html。
我這裡是針對nginx的配置,總結如下:

方案一 (這種方式容易被第三方劫持)

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        error_page 404
/index.html; }

方案二

    location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }
  server {
        listen       8888;#預設埠是80,如果埠沒被佔用可以不用修改
        server_name  localhost;
        root        E
:/vue/my_project/dist;#vue專案的打包後的dist location / { try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404 index index.html index.htm; } #對應上面的@router,主要原因是路由的路徑資源並不是一個真實的路徑,所以無法找到具體的檔案 #因此需要rewrite到index.html中,然後交給路由在處理請求資源 location @router
{ rewrite ^.*$ /index.html last; } #.......其他部分省略 }

相關推薦

vue路由history模式重新整理404問題解決方案

vue單頁因微信分享和自動登入需要,對於URL中存在’#’的地址,處理起來比較坑。用history模式就不會存在這樣的問題。但是換成history模式,就會有個新的問題,就是頁面重新整理後,頁面就無法顯示了(404)。對於這個問題,我們只需要在伺服器配置如果UR

Vue路由History模式分析

# Vue路由History模式分析 `Vue-router`是`Vue`的核心元件,主要是作為`Vue`的路由管理器,`Vue-router`預設`hash`模式,通過引入`Vue-router`物件模組時配置`mode`屬性可以啟用`history`模式。 ## 描述 `Vue-router`的`has

Vue-router學習筆記——遇到的坑(一)history模式重新整理/設定巢狀路由顯示404/cannot find(webpack配置)

前端路由有兩種,一種是hash模式,一種是history模式。 這兩種模式的url路徑都不需要真實存在,只需要為前端跳轉做一個顯示。 hash模式的url路徑會帶有#,看起來不太舒服且不好做SEO,但是因為瀏覽器向伺服器請求時會自動忽略#後面的值,所以在瀏覽器中重新整理還是

Vue路由History mode模式中頁面無法渲染的原因及解決

Vue下路由History mode導致頁面無法渲染的原因 用 Vue.js + vue-router 建立單頁應用,是非常簡單的。使用 Vue.js ,我們已經可以通過組合元件來組成應用程式,當你要把 vue-router 新增進來,我們需要做的是,將元件(

vue-cli history模式 tomcat部署 報404 解決方式

vue-cli開發過程中路由#不好看,去掉可使用history模式,開發模式路徑訪問都沒問題,部署到伺服器之後訪問路徑時報404,這種情況需要配置伺服器預設訪問路徑index.html.官網只提供了apache、nginx的配置方式,沒有tomcat的配置方式,下面以個例子來

Laravel+vue實現history模式URL可行方案

改變 welcom 判斷 param function 部署 應用 返回 sco 項目:laravel + vue 實現前後端分離。vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL,於是當 URL 改變時,頁面不會重新加

vue 路由許可權 頁面重新整理時報404問題

開始的時候我是這麼寫的 、 這個時候重新整理頁面 已經配置好的路由 頁面莫名其妙跑到404了 鬧心啊 各種debugger都不好使 然後問了一下群  大佬說 這個404 不能寫到路由 要 在addrouter裡進行拼接404這個路由 然後我就 把這

vue路由傳物件重新整理會報錯,資料丟失,用json字串解決

我的訂單頁面---------》訂單詳情頁面 我的訂單頁面: encodeURIComponent(JSON.stringify(this.detailMsg))------變成json字串,且加密 toDetail(index) { request.p

vue-cli打包訪問靜態資源404解決方案

使用vue-cli生產打包,把程式碼放到伺服器上訪問的時候,不少同學會看到頁面一片空白,開啟控制檯,會發現是某些資原始檔找不到,如圖: 其實這裡是因為vue-cli的webpack打包配置靜態檔案訪問路徑不對,配置檔案路徑如圖: 在這個檔案下面找到生

Nginx配置https的wordpress站點,wp-content目錄下資源404解決方案

pem list log 解決方案 content wordpress timeout nginx span wordpress 下配置 ssl證書, server { listen 443; server_name demo

VB.net 圖片重新整理閃爍 解決方案

解決圖片重新整理閃爍可使能DoubleBuffering 將以下程式碼插入 Public Sub EnableDoubleBuffering() ' Set the value of the double-buffering style bits to true.

通過vue-cli生成專案時報錯解決方案

全域性安裝 vue-cli $ npm install -g vue-cli 建立一個基於 “webpack” 模板的新專案 $ vue init webpack my-project 在執行vue init webpack my-project時遇到一個錯

visio開啟提示上一次開啟失敗,需在安全模式下啟動解決方案

  今天visio不知道怎麼了,之前好好的,突然不能用了,提示需要在安全模式下啟動。點選了是也還是沒有啟動,修復和重新安裝了幾次也不行。 後面百度到解決“WORD上次啟動時失敗,以安全模式啟動”方法 這篇文章解決了問題。   解決方案: 使用everythin

SpringMVC之坑--001--靜態資源引入404解決方案

看視訊學習springmvc過程中踩過許多坑,現把這些坑一一記錄下來 1.靜態資源引入404問題 資料夾如下 問題:能進入jsp/index.jsp,如圖: 但是js,css引入失敗,springMVC配置如下: 起初,懷疑是 mvc:resource

MySQL5.7預設開啟ONLY_FULL_GROUP_BY模式問題與解決方案

MySQL5.7後將sql_mode的ONLY_FULL_GROUP_BY模式預設設定為開啟狀態,這樣一來,很多之前的sql語句可能會出現錯誤,錯誤資訊如下:Error Code: 1055. Expression #3 of SELECT list is not in GROUP BY clause and

Spring MVC不進入Controller,報錯404解決方案

1、檢查URL是否會被springmvc攔截 首先檢查訪問路徑URL是否正確被springmvc攔截,這個URL和web.,xml中對springmvc的配置有關。 2、檢查Con

Spring WebSocket 404 解決方案

近來學習 Spring WebSocket 時按照 Spring IN ACTION 中示例編寫程式碼,執行時瀏覽器報 404 錯誤 WebSocket connection to 'ws://localhost/websocket/marco' fail

c#,Asp.net,dtcms上傳大檔案失敗,錯誤程式碼:http,Http error 404 解決方案

第一步:修改系統上傳配置: 控制面板》系統設定》檔案上傳設定 第二步 :修改web.config <!--maxRequestLength就是檔案的最大字元數,最大值不能超過2個G左右,executionTimeout是超時時間--> 

laravel配置路由除了 / 都是404解決辦法

1.php.ini開啟phpopenssl   2.conf  (nginx為例) #try_files $uri $uri/ =404;  註釋這行(有的話) try_files $uri $uri/ /index.php?$query_string;  #

VueVue移動端頁面自適應解決方案

移動端頁面自適應解決方案 該方案使用相當簡單,把下面這段已壓縮過的 原生JS(僅1kb,原始碼已在文章底部更新,2017/5/3) 放到 HTML 的 head 標籤中即可(注:不要手動設定viewport,該方案自動幫你設定) <scri