オプション1：事前レンダリングprerender-spa-plugin

いくつかのマーケティングページ（/、/について、/連絡先など）のSEOを改善するためだけに使用されている場合は、事前レンダリングが必要になることがあります。Webサーバーを使用してHTMLをリアルタイムで動的にコンパイルする代わりに、事前レンダリングメソッドを使用して、ビルド時に特定のルートの静的HTMLファイルを生成します。利点は、事前レンダリングの設定が簡単になり、フロントエンドを完全に静的なサイトとして使用できることです。

利点：

変更は少なく、プラグインの導入が行われます。

不十分：

動的ルーティングは使用できません。
ページ数が少ないプロジェクトにのみ適しています。数百ページまでの場合、パッケージ化は非常に遅くなります。

解決策は次のとおりです。

1.最初にインストールする必要がありますprerender-spa-plugin和vue-meta-info，prerender-spa-plugin解决打包多个页面，vue-meta-info解决SEO的问题

npm install --save prerender-spa-plugin

npm install --save vue-meta-info

2.プロジェクトでwebpack.prod.conf.jsを見つけます。ファイル名が異なる可能性があります。このとき、コマンドラインに従って関連ファイルを見つける必要があります

このファイルに次のコードを追加します

関連するコードを貼り付けます

const PrerenderSPAPlugin = require（ 'prerender-spa-plugin' ）
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 new PrerenderSPAPlugin（{
       // 必須 
      -prerender。staticDir：path.join（__ dirname、 '../ へのwebpack-outputtedアプリへのパス dist ' ）、
       // 必須-レンダリングするルート。route 
      ：[' / '、' / cart '、' / list ' ]、
      renderer：new Renderer（{ 
        inject：{ 
          foo： ' bar ' 
        }、
        headless：false 、
         //main.jsのdocument.dispatchEvent（新しいイベント（ 'render-event'））では、2つのイベント名が対応している必要があります。
        renderAfterDocumentEvent： 'render-event' 
      }）
}）、

3. VUEプロジェクトに関連するコードを追加します

関連するコードを貼り付け、

new Vue（{ 
  el： '#app' 、
  router、
  store、
  render：h => h（App）、
    Mounted 
  （）{ // renderAfterDocumentEvent。document.dispatchEvent 
    
    （new Event（ 'render-event ' ））
    } 
}）。$ mount（ ' #app '）

4.この時点で、複数のページへのパッケージ化を完了し、パッケージングコマンドを実行します。

npm run build

5.パッケージ化が完了すると、関連するフォルダーが表示されます。各ファイルには関連するインデックスがあり、htmlはパッケージ化が成功したことを示します

5次のステップは、SEOの問題を解決し、vue-meta-infoをインポートして、

6次に、必要なコンポーネントに次のコードを追加します

関連するコードを貼り付けます

metaInfo：{ 
    title： 'I am the hello header'、// タイトルを設定 
    meta：[{              // set meta 
      name： 'keyWords' 、
      content： 'I am the hello keyword' 
    }、
    { 
      name： 'description' 、
      content ： '私はこんにちは説明' 
    }] 
 }

7.次に、パッケージングプログラムを実行します。このとき、関連するページに関連するメタが表示されます。

説明が成功したことを確認してください。これで完了です。手をたたいて祝う！

シナリオ2：静的化静的化はNuxt.jsをパッケージ化するもう1つの方法で、Nuxt.jsの革新であり、ページの読み込み速度は非常に高速です。

Nuxt.jsが静的パッケージの生成を実行すると、動的ルーティングは無視されます。

利点：

非常に高速なアクセス速度を持つ純粋に静的なファイル。
SSRと比較すると、サーバーの負荷の問題はありません。
静的なWebページはハッカーに攻撃されるべきではなく、より高いセキュリティが必要です。

不十分：

動的ルーティングパラメータが多数ある場合は適用されません。

VUEのSEOソリューション

オプション1：事前レンダリングprerender-spa-plugin

解決策は次のとおりです。

シナリオ2：静的化静的化はNuxt.jsをパッケージ化するもう1つの方法で、Nuxt.jsの革新であり、ページの読み込み速度は非常に高速です。

おすすめ