亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Laravel+vue實(shí)現(xiàn)history模式URL可行方案

YacaToy / 2001人閱讀

摘要：項(xiàng)目實(shí)現(xiàn)前后端分離。默認(rèn)模式使用的來(lái)模擬一個(gè)完整的，于是當(dāng)改變時(shí)，頁(yè)面不會(huì)重新加載。沒(méi)有特別的要求的話，模式亦正常訪問(wèn)?？纯次臋n，要實(shí)現(xiàn)模式也很簡(jiǎn)單。切換一下模式，本地測(cè)試?yán)?。配置一下沒(méi)錯(cuò)，部署前端資源服務(wù)器上簡(jiǎn)單加上一條通用匹配規(guī)則。

項(xiàng)目：laravel + vue 實(shí)現(xiàn)前后端分離。
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。

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

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

沒(méi)有特別的要求的話，hash模式亦正常訪問(wèn)。好嘛，產(chǎn)品要求URL要像正常那樣的 —— history模式的?？纯磛ue文檔，要實(shí)現(xiàn)vue history模式也很簡(jiǎn)單。vue 切換一下模式，本地測(cè)試ok啦。
接下來(lái)，看到還需要后臺(tái)配置支持:

因?yàn)閂UE應(yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。

So,Nginx配置一下:

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

沒(méi)錯(cuò)，部署前端資源Nginx服務(wù)器上,簡(jiǎn)單加上一條通用匹配規(guī)則。
至此，vue 前端搞定了，但是。。。還是不行的！
原因是從前端服務(wù)器訪問(wèn)是正常了，但是域名指向的是后端服務(wù)器，所以當(dāng)vue router history模式url直接訪問(wèn)時(shí)還是會(huì)404.
當(dāng)?shù)竭@里，又回頭排查一下是不是前面哪里搞錯(cuò)了，仔細(xì)看下來(lái)，沒(méi)問(wèn)題啊，完全按vue文檔說(shuō)明操作啦。
想一陣子，才找到思路：404是后端報(bào)出的，也就說(shuō)Laravel給出的，laravel router 壓根就沒(méi)前端定義的路由。所以，當(dāng)即一拍腦子，就想到是不是將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 地址丟失問(wèn)題
        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 問(wèn)題！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/40169.html

相關(guān)文章

  • Laravel+vue實(shí)現(xiàn)history模式URL可行方案

    摘要：項(xiàng)目實(shí)現(xiàn)前后端分離。默認(rèn)模式使用的來(lái)模擬一個(gè)完整的，于是當(dāng)改變時(shí)，頁(yè)面不會(huì)重新加載。沒(méi)有特別的要求的話，模式亦正常訪問(wèn)。看看文檔，要實(shí)現(xiàn)模式也很簡(jiǎn)單。切換一下模式，本地測(cè)試?yán)病Ｅ渲靡幌聸](méi)錯(cuò)，部署前端資源服務(wù)器上簡(jiǎn)單加上一條通用匹配規(guī)則。 項(xiàng)目：laravel + vue 實(shí)現(xiàn)前后端分離。vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 UR...

    WilsonLiu95 評(píng)論0 收藏0

  • [譯]如何基于Laravel構(gòu)建Vue應(yīng)用（一）

    摘要：使用能優(yōu)雅的構(gòu)建并且與單頁(yè)面應(yīng)用程序完美結(jié)合。我們將重點(diǎn)關(guān)注所需的所有部分，然后在后續(xù)教程中，我們將進(jìn)一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應(yīng)用程序模板。運(yùn)行應(yīng)用程序該基礎(chǔ)用于構(gòu)建具有和路由器的。 使用Laravel能優(yōu)雅的構(gòu)建API并且與Vue單頁(yè)面應(yīng)用程序（SPA）完美結(jié)合。在本教程中，我們將展示如何啟動(dòng)和運(yùn)行Vue路由器以及用于構(gòu)建SPA的La...

    Rocko 評(píng)論0 收藏0

  • vue vue-router(history模式) node(express)項(xiàng)目部署到云主機(jī)上的n

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

    Honwhy 評(píng)論0 收藏0

  • Vue項(xiàng)目部署遇到的問(wèn)題及解決方案

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

    姘擱『 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<