vue-meta 作為Vue.js html meta data管理器，是 Vue.js 的一個(gè)插件，它可以幫助用戶使用 Vue 的內(nèi)置反應(yīng)性來管理應(yīng)用程序的元數(shù)據(jù)。

? ? ? ? ?

1.?title值直接映射到 HTML 中的，然后元數(shù)組中的每個(gè)值都會(huì)創(chuàng)建一個(gè)<meta></meta>并具有相應(yīng)name屬性的新標(biāo)簽。

2.?data-hid 可以通過確保此處的keywords, description標(biāo)簽匹配相同的值來覆蓋全局定義的描述和關(guān)鍵字元標(biāo)簽?。這種方式vue-meta將知道它必須覆蓋默認(rèn)標(biāo)記。

3. 字段里包含<meta data-n-head="ssr" charset="utf-8">?，意思為配合nuxt框架使用，網(wǎng)站進(jìn)行了服務(wù)器渲染。服務(wù)端渲染（SSR, Server Side Render），簡(jiǎn)單來講，就是在訪問這個(gè)頁面時(shí)，服務(wù)端會(huì)把渲染好的頁面，直接返回給瀏覽器。

4. Nuxt 添加?data-n-head?到其中，在大多數(shù)情況下它是非常標(biāo)準(zhǔn)的元標(biāo)記

? ? ? ? ?

實(shí)現(xiàn)方法：

在應(yīng)用程序中提供app.head屬性nuxt.config.ts允許自定義整個(gè)應(yīng)用程序的頭部

在nuxt.config.ts中配置如下：

export default {

? head:?{

??? title:?'Nxut JS配置nxut meta元標(biāo)記學(xué)習(xí)',

??? meta:?[

????? {?charset: 'utf-8' },

????? {?name: 'viewport', content: 'width=device-width, initial-scale=1' },

????? {?

hid: 'description',

name: 'description',

content: '這篇文章告訴你學(xué)習(xí)如何在Nxut JS中配置非常標(biāo)準(zhǔn)的nxut meta元標(biāo)記，易懂，高效'

},

????? {?

hid: 'keywords',

name: 'keywords',

content: 'nxut js, nxut meta, 元標(biāo)記'

}

??? ],

? ? ? ? ?

在頁面源代碼里是這樣的：

? ?

<title> Nxut JS配置nxut meta元標(biāo)記學(xué)習(xí)</title>

<meta data-n-head="true" charset="utf-8"/>

<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/>

<meta data-n-head="true" data-hid="description" name="description" content="這篇文章告訴你學(xué)習(xí)如何在Nxut JS中配置非常標(biāo)準(zhǔn)的nxut meta元標(biāo)記，易懂，高效"/>

<meta data-n-head="true" data-hid="keywords" name="keywords" keywords=" nxut js, nxut meta, 元標(biāo)記"/>

? ? ? ? ?

Nuxt 為用戶提供了 3 種不同的方式來將元數(shù)據(jù)添加到應(yīng)用程序：

1. 全局使用 nuxt.config.js：Nuxt 允許用戶 ? ? 使用 head 屬性在 nuxt.config.js 文件中為應(yīng)用程序定義所有默認(rèn)標(biāo)簽。這對(duì)于為 SEO 目的添加默認(rèn)標(biāo)題和描述標(biāo)簽或設(shè)置視口或添加網(wǎng)站圖標(biāo)非常有用。

2. 在本地使用head作為對(duì)象：可以通過在每個(gè)頁面head的腳本標(biāo)記內(nèi)設(shè)置屬性來為每個(gè)頁面添加標(biāo)題和元數(shù)據(jù)。

3. 在本地使用 head 作為函數(shù)，以便訪問數(shù)據(jù)和計(jì)算屬性：將head用作僅為主頁設(shè)置標(biāo)題和描述的函數(shù)。

總結(jié)：

可以通過將外部資源（例如腳本和字體）全局添加到對(duì)象或函數(shù)nuxt.config.js或局部添加到head對(duì)象或函數(shù)中來包含它們。

Nxut還可以設(shè)置Facebook open graph html標(biāo)簽和twitter card，以便用戶在社交網(wǎng)絡(luò)上分享站點(diǎn)或頁面時(shí)，他們的機(jī)器人會(huì)掃描站點(diǎn)或頁面并使用這些標(biāo)記的值，如圖片，標(biāo)題，描述等。

示例如下：

export default {

? head(){

??? return?{

????? meta:[

?{?hid: 'og-type', property: 'og:type', content: 'website' },

{ hid: 'og-title', property: 'og:title', content: 'My Title' },

{ hid: 'og-desc', property: 'og:description', content: 'This is a sweet post' },

{ hid: 'og-image', property: 'og:image',

? content:?'https://domain.com/my-image.jpg'

},

{ hid: 'og-url', property: 'og:url', content: 'https://domain.com/my-post' },

????? ]

??? }

? },

擴(kuò)展：什么是Nuxt JS？

Nuxt.js（Nuxt，NuxtJS） 是一個(gè)基于 Vue.js 的輕量級(jí)應(yīng)用框架，用于Vue.js 開發(fā)SSR應(yīng)用的一站式解決方案，創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用，也可充當(dāng)靜態(tài)站點(diǎn)引擎生成靜態(tài)站點(diǎn)應(yīng)用，具有優(yōu)雅的代碼結(jié)構(gòu)分層和熱加載等特性。

Nuxt JS有什么優(yōu)點(diǎn)？

1、模塊化

Nuxt 基于一個(gè)強(qiáng)大的模塊化架構(gòu)。可以從 50 多個(gè)模塊中進(jìn)行選擇，讓開發(fā)變得更快、更簡(jiǎn)單。對(duì) PWA 的支持、添加谷歌分析到你的網(wǎng)頁或生成網(wǎng)站地圖。

2、服務(wù)器端渲染

利用 SSR（也叫做 "universal" or "isomorphic" 模式），Node.js 服務(wù)器將基于 Vue 的組件渲染成 HTML 并傳輸?shù)娇蛻舳耍?strong>可以實(shí)現(xiàn)頁面緩存，組建緩存，接口緩存。

3、生成靜態(tài)站點(diǎn)

Nuxt.js 支持基于 Vue 應(yīng)用程序生成靜態(tài)站點(diǎn)，并仍能獲得 SEO 的好處，因?yàn)?Nuxt 將預(yù)先渲染所有頁面，并且包括必要的 HTML?？梢暂p松地將生成的頁面部署到 Netlify 或 GitHub pages 上。

4、高性能

Nuxt.js 默認(rèn)會(huì)優(yōu)化你的應(yīng)用程序，利用 Vue.js 和 Node.js 的最佳實(shí)踐來構(gòu)建高性能的應(yīng)用程序。把所有不需要的比特都從你的應(yīng)用程序中剔除，并且還包含了一組分析器，以便更好地優(yōu)化應(yīng)用程序。

5、友好性

關(guān)注的是開發(fā)者的使用體驗(yàn)，Nuxt.js 具備有吸引力的解決方案、描述清晰的錯(cuò)誤消息、強(qiáng)大的默認(rèn)值和詳細(xì)的文檔。