遇到的問題:

近來在寫個人博客的時候遇到了大家可能都會遇到的問題

Vue單頁面在SEO時顯得很無力，尤其是百度不會抓取動態腳本

Vue-Router配合前后端分離無法讓meta標簽在蜘蛛抓取時動態填充

Vue單頁面又是大勢所趨，寫起來也不止是一個爽，當然也可以選擇多頁面

但即使是多頁面在面對文章和文檔時候也不可能說給每篇文章生成個Vue頁面

SSR當然能解決這個問題，但是仔細想想SSR不就跟以前的.php頁面一樣了么

都是預先拉取所有數據然后填充返回給瀏覽器，需要多消耗服務器資源，而且配置繁瑣

當然預渲染也不能解決這個問題

那么問題來了，我只是想讓百度抓取下我的動態文章，但是配置個繁瑣的SSR并不是最好選擇

我的解決辦法:

既然只是想讓百度抓取下我的動態文章，其實就是讓蜘蛛抓取我的靜態頁面時候，html的meta標簽是已經填充好的

那么就很簡單了，我們只需要實現一個極其簡單的閹割版的SSR不就好了么

PS：我百度了很久沒有找到相關的文章，不知道是不是我百度的姿勢不對😅

具體思路:

因為我的服務器后端語言是php，service是nginx，所以我這里展示的所有后端代碼都是基于php，大家當然可以選擇nodejs或者其他的語言去實現，這里提供個簡單的思路

上面說到我們要實現個閹割版SSR，其實就是在服務器有請求過來的時候在靜態html的meta標簽上填充好數據然后返回給請求端

這里的實現都是基于已經構建好的Vue單頁面，所以請先構建好一個Vue單頁面

先把構建好的dist下的index.html改造下

在頂部將變量拿取到，因為接口都是現成的，所以偷個懶直接調取接口

<?php$valDescription = '前端入門,進階總結記錄,個人日志博客,分享web學習經驗的小窩。';$valKeywords = 'web窩,前端,vue,js,博客,JavaScript,css,入門,教程';$valTitle = 'web窩';/** * 發送HTTP請求方法 * @param string $url  請求URL * @param array $params 請求參數 * @param string $method 請求方法GET/POST * @return array $data  響應數據 */function http_Req($url, $params, $method = 'GET', $header = array("Content-type: text/html; charset=utf-8"), $multi = false){  if($method == 'POST'){    $header = ["Content-type: application/x-www-form-urlencoded"];  }  $opts = array(    CURLOPT_TIMEOUT    => 30,    CURLOPT_RETURNTRANSFER => 1,    CURLOPT_SSL_VERIFYPEER => false,    CURLOPT_SSL_VERIFYHOST => false,    CURLOPT_HTTPHEADER   => $header  );  /* 根據請求類型設置特定參數 */  switch(strtoupper($method)){    case 'GET':      $opts[CURLOPT_URL] = $url . '?' . http_build_query($params);      break;    case 'POST':      //判斷是否傳輸文件      $params = $multi ? $params : http_build_query($params);      $opts[CURLOPT_URL] = $url;      $opts[CURLOPT_POST] = 1;      $opts[CURLOPT_POSTFIELDS] = $params;      break;    default:      throw new Exception('不支持的請求方式！');  }  /* 初始化并執行curl請求 */  $ch = curl_init();  curl_setopt_array($ch, $opts);  $data = curl_exec($ch);  $error = curl_error($ch);  curl_close($ch);  if($error) throw new Exception('請求發生錯誤：' . $error);  return $data;}//分割當前請求的路徑$urlExp = explode('/',$_SERVER['REQUEST_URI']);//如果當前的路徑是文章內容if(count($urlExp)>2 && $urlExp[1] == 'article'){//請求當前文章的標題和描述  $ret = json_decode(http_Req('http://127.0.0.1/api/Blog/getsinglelist',['tuid'=>$urlExp[2]],'POST'),true);  $valKeywords = $ret['info'][0]['tt'].','.$valKeywords;  $valDescription = $ret['info'][0]['txt'].' - '.$valTitle.','.$valDescription;  $valTitle = $ret['info'][0]['tt'].' - '.$valTitle;}?>