這篇文章主要介紹在不使用ssr的情況下如何解決Vue單頁面SEO問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創新互聯專注為客戶提供全方位的互聯網綜合服務，包含不限于做網站、網站建設、陽谷網絡推廣、小程序定制開發、陽谷網絡營銷、陽谷企業策劃、陽谷品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯為所有大學生創業者提供陽谷建站搭建服務，24小時服務熱線：18980820575，官方網址：vcdvsql.cn

遇到的問題:

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

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;
}
?>

將拿到的數據輸出到meta標簽上

<meta name="description" content="<?php echo $valDescription; ?>"/>
<meta name="keywords" content="<?php echo $valKeywords; ?>"/>

 
<title><?php echo $valTitle; ?></title>

然后把文件名改為index.php

寫的很糙，反正就只有這一個功能，先扔到這

我的service是nginx，Vue-Router是history模式，所以當有html請求過來的時候我把所有原先轉向index.html的請求都轉向到了index.php

這樣就實現了個閹割版的SSR

效果就像這樣 web窩

每篇文章刷新的時候相應的meta標簽都會提前填充好數據

配合nginx實現Vue-Router的history模式

當然只有history模式才有SEO的意義

只需要將nginx配置里原先轉向index.html的地方改為index.php即可，Apache同理

location / {
  index index.php;
  alias /var/www/html/blog/;
  try_files $uri $uri/ /index.php;
}

關于后端接口請求的問題

因為我自己就一臺服務器，后端語言是php

php所用的框架也需要偽靜態

所以我的解決方式是用nginx配置根據二級域名，去代理所訪問的路徑

類似靜態資源訪問的都是cdn的二級域名，接口的請求訪問的都是api的二級域名

server {
  listen    80;
  listen   443 ssl;
  server_name cdn.linkvall.cn;
  root     /var/blog;
}
server {
  listen    80;
  listen   443 ssl;
  server_name api.linkvall.cn;
  root     /var/api;
}

當然你可以簡單的用請求的路徑去配置

server {
  listen    80;
  listen   443 ssl;
  server_name cdn.linkvall.cn;
  root     /var;

 
location ~ ^/api/ {
alias /var/api;
}

 
location ~ ^/blog/ {
alias /var/blog/;
}
}

這樣就可以把各自的資源路徑區分開

寫在最后

本來是打算用nodejs實現的，寫一個npm包，跑一個node進程，然后nginx把請求反向代理到node端口，這樣看上去更優雅

不過轉念一想我的后端是php，直接代理到這個php文件可以省去寫npm包的時間，就是構建好的html還要每次都更改下有一點點費勁，而且不優雅

這里更多的是提供一個思路，后面有時間了或許我會寫一個npm包優雅的實現它

以上是“在不使用ssr的情況下如何解決Vue單頁面SEO問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

文章標題：在不使用ssr的情況下如何解決Vue單頁面SEO問題
標題網址：http://vcdvsql.cn/article48/pdhhhp.html

成都網站建設公司_創新互聯，為您提供網站建設、云服務器、移動網站建設、網站排名、品牌網站設計、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯