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

YacaToy 發布于2019-07-25 14:30 / 1947人閱讀

摘要：項目實現前后端分離。默認模式使用的來模擬一個完整的，于是當改變時，頁面不會重新加載。沒有特別的要求的話，模式亦正常訪問。看看文檔，要實現模式也很簡單。切換一下模式，本地測試啦。配置一下沒錯，部署前端資源服務器上簡單加上一條通用匹配規則。

項目：laravel + vue 實現前后端分離。
vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。

hash URL 例如：http://yoursite.com/#/user/id。

history 模式時，URL就像正常的 url，例如 http://yoursite.com/user/id。

沒有特別的要求的話，hash模式亦正常訪問。好嘛，產品要求URL要像正常那樣的 —— history模式的。看看vue文檔，要實現vue history模式也很簡單。vue 切換一下模式，本地測試ok啦。
接下來，看到還需要后臺配置支持:

因為VUE應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

So,Nginx配置一下:

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

沒錯，部署前端資源Nginx服務器上,簡單加上一條通用匹配規則。
至此，vue 前端搞定了，但是。。。還是不行的！
原因是從前端服務器訪問是正常了，但是域名指向的是后端服務器，所以當vue router history模式url直接訪問時還是會404.
當到這里，又回頭排查一下是不是前面哪里搞錯了，仔細看下來，沒問題啊，完全按vue文檔說明操作啦。
想一陣子，才找到思路：404是后端報出的，也就說Laravel給出的，laravel router 壓根就沒前端定義的路由。所以，當即一拍腦子，就想到是不是將laravel 異常處理在response出去前給中斷一下，將404處理交給前端再處理一下，那么也只是需要在app/Exceptions/Handler中render方法加下判斷：

/**
     * Render an exception into an HTTP response.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Exception  $exception
     * @return IlluminateHttpResponse
     */
    public function render($request, Exception $exception)
    {
        // 解決vue history 地址丟失問題
        if($exception instanceof SymfonyComponentHttpKernelExceptionNotFoundHttpException)
        {
            if ($exception->getStatusCode() == 404) {
                return response()->view("welcome");
            }
        }
        return parent::render($request, $exception);
    }

解釋一下：welcome 就是加載了vue CSS和JS，也就是vue依賴文件。
以上搞定前后端分離，vue history 404 問題！

云服務器 GPU云服務器 VUE實現webrtc Vue實現分頁 url路由實現 vue+webrtc實現實時視頻通話,語音通話

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40169.html

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

摘要：項目實現前后端分離。默認模式使用的來模擬一個完整的，于是當改變時，頁面不會重新加載。沒有特別的要求的話，模式亦正常訪問。看看文檔，要實現模式也很簡單。切換一下模式，本地測試啦。配置一下沒錯，部署前端資源服務器上簡單加上一條通用匹配規則。項目：laravel + vue 實現前后端分離。vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 UR...

WilsonLiu95 2019-07-01 10:54 評論0 收藏0
[譯]如何基于Laravel構建Vue應用（一）

摘要：使用能優雅的構建并且與單頁面應用程序完美結合。我們將重點關注所需的所有部分，然后在后續教程中，我們將進一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應用程序模板。運行應用程序該基礎用于構建具有和路由器的。使用Laravel能優雅的構建API并且與Vue單頁面應用程序（SPA）完美結合。在本教程中，我們將展示如何啟動和運行Vue路由器以及用于構建SPA的La...

Rocko 2019-07-01 12:42 評論0 收藏0
vue vue-router(history模式) node(express)項目部署到云主機上的n

摘要：這個方法我沒有嘗試過，不過應該是可行的這樣的優點是很簡便，適合小型的網站項目將打包的項目和服務端分別部署客戶端根目錄主頁避免模式刷新管理控制后臺服務端跨域這樣部署雖然稍微麻煩一點，但可以適應很多場景，而且開發分工更方便，結構也一目了然我個人想了2種部署方案 1、將vue項目打包后放入node服務端的靜態資源中訪問整體結構基本是這樣的 showImg(https://segmentf...

Honwhy 2019-07-25 14:24 評論0 收藏0
Vue項目部署遇到的問題及解決方案

摘要：模式部署沒有什么問題，只要訪問到服務器上的，就可以訪問網站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網站，刷新也沒有問題。寫在前面 Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，...

姘擱『 2019-08-23 14:38 評論0 收藏0