Vue 2 SSRレンダリングは異なるページによってmetaを修正します。

本文は主にVue 2 SSRレンダリングを紹介します。各ページによってmetaを修正します。
注意:
テスト後、vue-metaはメモリが漏れてしまいますので、ご注意ください。
今のvue 2のサービス端末でレンダリングするモードは、すべてwebpackを通して作成されたhtmlモダリティファイル（または直接server.jsに綴り込む）であり、fs.readFileSyncを通してこのファイルを読み取り、res.endを通して出力するので、metaの修正が面倒になります。
この時、私達はvue-metaによって管理できます。以下は公式のvue-hackernews-2.0を例にして、使い方を説明します。
インストール
Yarn

yarn add vue-meta

NPM

npm install vue-meta --save

プラグインを準備
router/index.jsに追加します。

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'
 
Vue.use(Router)
Vue.use(Meta)
 
export default new Router({
 // ...
})

職務に応じて誇張する
server-entry.jsに追加します。

import { app, router, store } from './app'
 
const isDev = process.env.NODE_ENV !== 'production'
const meta = app.$meta() //   
 
export default context => {
 router.push(context.url)
 context.meta = meta //   
 const ss = isDev && Date.now()
 // ...
}

server.jsで修正

renderStream.once('data', () => {
 res.write(indexHTML.head)
})

を選択します

renderStream.once('data', () => {
 const { title, meta } = context.meta.inject()
 indexHTML.head = indexHTML.head.replace(/<title.*?<\/title>/g, title.text())
 indexHTML.head = indexHTML.head.replace(/<meta.*?name="description".*?\/>/g, meta.text())
 res.write(indexHTML.head)
})

ここでは、代替titleとdescriptionだけを選択します。他に必要なものがあれば、自分で正則を追加します。
注意：テンプレートに含まれることを保証してください。

<title>xxxx</title>

和

<meta name="description" content="xxxx">

ルートコンポーネントを変更
ルートコンポーネントに追加

export default {
 name: 'frontend-index',
 prefetch: fetchInitialData,
 //       
 metaInfo () {
 const title = 'M.M.F    -   '
 return {
  title,
  meta: [{ vmid: 'description', name: 'description', content: title }]
 }
 }
}

それともこのように

export default {
 name: 'frontend-article',
 prefetch: fetchInitialData,
 //       
 metaInfo () {
 const title = this.article.title
 return {
  title: title + ' - M.M.F   ',
  meta: [{ vmid: 'description', name: 'description', content: title + ' M.M.F   ' }]
 }
 }
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。