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

<p>項目：laravel + vue 實現先後端分離。<br>vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。</p> <ul> <li>hash URL 例如：<a href="http://www.jqhtml.com/18342.html" target="_blank">Vue 使用History記錄上一頁面的數據</a>。</li> <li>history 模式時，URL就像正常的 url，例如 <code>http://yoursite.com/user/id</code>。</li> </ul> <p>沒有特別的要求的話，hash模式亦正常訪問。好嘛，產品要求URL要像正常那樣的 —— history模式的。看看vue文檔，要實現vue history模式也很簡單。vue 切換一下模式，本地測試ok啦。<br>接下來，看到還須要後臺配置支持:</p> <blockquote>由於VUE應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 <a href="http://oursite.com/user/id" rel="nofollow noreferrer">http://oursite.com/user/id</a> 就會返回 404，這就很差看了。因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。</blockquote> <p>So,Nginx配置一下:</p>

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

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

/**
     * Render an exception into an HTTP response.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Exception  $exception
     * @return \Illuminate\Http\Response
     */
    public function render($request, Exception $exception)
    {
        // 解決vue history 地址丟失問題
        if($exception instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException)
        {
            if ($exception->getStatusCode() == 404) {
                return response()->view('welcome');
            }
        }
        return parent::render($request, $exception);
    }

<p>解釋一下：welcome 就是加載了vue CSS和JS，也就是vue依賴文件。<br>以上搞定先後端分離，vue history 404 問題！</p>

原文地址：https://segmentfault.com/a/1190000016928656