欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解處理Vue單頁面應(yīng)用SEO的另一種思路

 更新時間:2018年11月09日 11:32:17   作者:muwoo  
這篇文章主要介紹了詳解處理Vue單頁面應(yīng)用SEO的另一種思路,本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹,非常具有實用價值,需要的朋友可以參考下

vue-meta-info 官方地址: monkeyWangs/vue-meta-info

(設(shè)置vue 單頁面meta info信息,如果需要單頁面SEO,可以和 prerender-spa-plugin形成更優(yōu)的配合)

單頁面應(yīng)用在前端正大放光彩。三大框架 Angular、Vue、React,可謂婦孺皆知。隨著單頁面應(yīng)用的普及,人們在感受其帶來的完美的用戶體驗,極強的開發(fā)效率的同時,也似乎不可避免的要去處理 SEO 的需求。

本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹:

其實解決SEO問題不一定非得用服務(wù)端渲染來處理,服務(wù)端渲染對于剛接觸 vue 的新手來說,并不是那么友好,雖然已有官方 SSR 中文文檔。但是對于一個已經(jīng)開發(fā)完畢的 vue 項目去接 SSR 無論是從工作量還是技術(shù)角度來說,都是一種挑戰(zhàn)。不過這些怎么能難得到偉大的前端程序員!

如果您調(diào)研服務(wù)器端渲染(SSR)只是用來改善少數(shù)營銷頁面(例如 /, /about, /contact 等)的 SEO,那么您可能需要預(yù)渲染。無需使用 web 服務(wù)器實時動態(tài)編譯 HTML,而是使用預(yù)渲染方式,在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點是設(shè)置預(yù)渲染更簡單,并可以將您的前端作為一個完全靜態(tài)的站點。

如果您使用 webpack,您可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測試。

預(yù)渲染為SEO提供了另一種可能,簡單的來說,預(yù)渲染就是當vue-cli構(gòu)建的項目進行npm run build 的時候,會按照路由的層級進行動態(tài)渲染出對應(yīng)的html文件。

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
 // ...
 plugins: [
  new PrerenderSpaPlugin(
   // 編譯后的html需要存放的路徑
   path.join(__dirname, '../dist'),
   // 列出哪些路由需要預(yù)渲染
   [ '/', '/about', '/contact' ]
  )
 ]
}

最終會生成類似于這樣的目錄結(jié)構(gòu)

而里面的內(nèi)容都會被渲染成了靜態(tài)的 html 文件

相對于之前的可能只有

<html>
 <head>
  <meta charset="utf-8">
  <title>tangeche-pc</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 <script type="text/javascript" src="/app.js"></script></body>
</html>

可以直觀的發(fā)現(xiàn),預(yù)渲染的作用。

有了預(yù)渲染,我們可以解決很多方面的SEO的問題,但是有時候我們也會需要Meta信息的變化,比如 title 比如 Meta keyWords 或者是 link...

這里安利一下vue-meta-info 一個可以動態(tài)設(shè)置meta 信息的vue插件如果需要單頁面SEO,可以和 prerender-spa-plugin形成更優(yōu)的配合。

vue-meta-info 是一個基于 vue 2.0 的插件,它會讓你更好的管理你的 app 里面的 meta 信息。你可以直接 在組件內(nèi)設(shè)置 metaInfo 便可以自動掛載到你的頁面中。如果你需要隨著數(shù)據(jù)的變化,自動更新你的 title、meta 等信息,那么用此 插件也是再合適不過了。 當然,有時候我們也可能會遇到讓人頭疼的 SEO 問題,那么使用此插件配合 prerender-spa-plugin 也是再合適不過了

1.安裝

yarn:

yarn add vue-meta-info

2. npm:

npm install vue-meta-info --save

2.全局引入 vue-meta-info

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

3.組件內(nèi)靜態(tài)使用 metaInfo

<template>
 ...
</template>

<script>
 export default {
  metaInfo: {
   title: 'My Example App', // set a title
   meta: [{         // set meta
    name: 'keyWords',
    content: 'My Example App'
   }]
   link: [{         // set link
    rel: 'asstes',
    href: 'https://assets-cdn.github.com/'
   }]
  }
 }
</script>

4.如果你的 title 或者 meta 是異步加載的,那么你可能需要這樣使用

<template>
 ...
</template>

<script>
 export default {
  name: 'async',
  metaInfo () {
   return {
    title: this.pageName
   }
  },
  data () {
   return {
    pageName: 'loading'
   }
  },
  mounted () {
   setTimeout(() => {
    this.pageName = 'async'
   }, 2000)
  }
 }
</script>

寫到這里,大家應(yīng)該都明白了我所說的 SEO 的另一種思路是什么了,preRender + metaInfo

可以才一定層次上去解決 SEO 問題,這種方式優(yōu)點就是代碼侵入性最低,開發(fā)成本最少。但是也是有弊端的:

  • 不能很好地處理用戶獨特性路由: 比如有個路由是 /my-profile, 預(yù)渲染可能不會很好用, 因為這個內(nèi)容頁是根據(jù)用戶信息變化的,所以頁面內(nèi)容也不是唯一確定的. 你可能會使用類似于這樣的路由路徑 /users/:username/profile,但是這樣也是不合適的.
  • 經(jīng)常變動的文件
  • 需要預(yù)渲染成千上萬的路由文件: 這個可能會導(dǎo)致你編譯時間.....額,可能你會編譯很長時間

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式

    vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式

    這篇文章主要介紹了vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 如何在基于vue-cli的項目自定義打包環(huán)境

    如何在基于vue-cli的項目自定義打包環(huán)境

    本篇文章主要介紹了在基于vue-cli的項目自定義打包環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 基于Vue實現(xiàn)樹形穿梭框的示例代碼

    基于Vue實現(xiàn)樹形穿梭框的示例代碼

    這篇文章主要為大家介紹了如何利用Vue實現(xiàn)一個樹形穿梭框,elementUI和ant-d組件庫的穿梭框組件效果都不是很好,所以本文將利用一個新的插件來實現(xiàn),需要的可以參考一下
    2022-04-04
  • 一文搞懂Vue中computed和watch的區(qū)別

    一文搞懂Vue中computed和watch的區(qū)別

    這篇文章主要和大家詳細介紹一下Vue中computed和watch的使用與區(qū)別,文中通過示例為大家進行了詳細講解,對Vue感興趣的同學,可以學習一下
    2022-11-11
  • vue中的主動觸發(fā)點擊事件

    vue中的主動觸發(fā)點擊事件

    這篇文章主要介紹了vue中的主動觸發(fā)點擊事件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue.js的簡單自動求和計算實例

    vue.js的簡單自動求和計算實例

    今天小編就為大家分享一篇vue.js的簡單自動求和計算實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 如何在寶塔面板部署vue項目

    如何在寶塔面板部署vue項目

    這篇文章主要給大家介紹了關(guān)于如何在寶塔面板部署vue項目的相關(guān)資料,寶塔面板可以通過Nginx來部署Vue項目,并解決跨域問題,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-11-11
  • 一文探索Vue中組件和插件使用細節(jié)與差異

    一文探索Vue中組件和插件使用細節(jié)與差異

    Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務(wù)于不同的目的,但都極大地豐富了Vue的功能性和可擴展性,下面我們就來看看二者的用法以及區(qū)別吧
    2024-03-03
  • vue  composition-api 封裝組合式函數(shù)的操作方法

    vue  composition-api 封裝組合式函數(shù)的操作方法

    在 Vue 應(yīng)用的概念中,“組合式函數(shù)”(Composables) 是一個利用 Vue 的組合式 API 來封裝和復(fù)用有狀態(tài)邏輯的函數(shù),這篇文章主要介紹了vue  composition-api 封裝組合式函數(shù)的操作方法,需要的朋友可以參考下
    2022-10-10
  • Vue 與 Vuex 的第一次接觸遇到的坑

    Vue 與 Vuex 的第一次接觸遇到的坑

    在 Vue.js 的項目中,如果項目結(jié)構(gòu)簡單, 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式,如果是大型項目,很多時候都需要在子組件之間傳遞數(shù)據(jù),使用vue的狀態(tài)管理工具vuex很好的解決
    2018-08-08

最新評論