Vueシングルページアプリケーションの事前レンダリング方法の例

Vueシングルページアプリケーションの事前レンダリング方法の例

序文

vue-cli でパッケージ化されたプロジェクトは、一般的に spa プロジェクトです。ご存知のとおり、シングルページ アプリケーションは SEO に適していません。解決策としては、ssr (サーバー側レンダリング) と事前レンダリングの 2 つがあります。ここでは、事前レンダリングについてのみ説明します。

vue-cli 2.0 バージョン

インストール

npm インストール prerender-spa-plugin --save

webpack.prod.conf.jsにコードを追加する

定数パス = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') // プラグインをインポート const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

プラグイン:[
	// PrerenderSPAPlugin を構成する
    新しいプリレンダリングSPAPlugin({
      // 生成されたファイルのパスは、webpakc によってパッケージ化されたパスと一致する場合もあります。
      staticDir: path.join(__dirname, '../dist'),
      
      // 独自のルーティング ファイルに対応して、たとえば、インデックスにパラメーターがある場合は、/index/param1 のように記述する必要があります。
      ルート: ['/', '/report','/genius','/index/param1'],
      // 必ず記述してください。このセクションが設定されていない場合、プリコンパイルは実行されません。renderer: new Renderer({
          注入:
            foo: 'バー'
          },
          ヘッドレス: 偽、
          // main.js の document.dispatchEvent(new Event('render-event')) では、2 つのイベント名が対応している必要があります。
          renderAfterDocumentEvent: 'レンダリングイベント'
      })
    })
]

main.jsに追加する

新しいVue({
  el: '#pingce',
  ルーター、
  店、
  コンポーネント: { アプリ },
  テンプレート: '<App/>',
  // マウントを追加します。そうしないと、プリコンパイルは実行されません。mounted() {
    document.dispatchEvent(新しいイベント('render-event'))
  }
})

router.js でモードを「history」に設定する

npm run build を実行し、生成された dist ディレクトリに各ルート名に対応するフォルダーがあるかどうかを確認します。次に、ディレクトリ内の index.html を見つけて IDE で開き、ファイルに必要なコンテンツが含まれているかどうかを確認します。

設定するルートごとにフォルダーが生成され、各フォルダーの下に index.html が生成されます。

vue-cli 3.0 バージョン

3.0 cli は、2.0 のビルド ディレクトリと config ディレクトリを削除して、はるかにシンプルになっています。では、webpack 構成をどのように変更すればよいのでしょうか?

ルートディレクトリに vue.config.js を作成し、設定を行います。

インストール

npm インストール prerender-spa-plugin --save

vue-config.jsに追加する

const PrerenderSPAPlugin = require('prerender-spa-plugin'); // プラグインをインポート const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
定数パス = require('path');
モジュール.エクスポート = {
    Webpack の設定: config => {
        process.env.NODE_ENV !== 'production' の場合、戻り値は次のようになります。
        戻る {
            プラグイン: [
                新しいプリレンダリングSPAPlugin({
                    // 生成されたファイルのパスは、webpakc によってパッケージ化されたパスと一致する場合もあります。
                    // このディレクトリには 1 つのレベルしか存在できません。ディレクトリ レベルが 1 レベルを超える場合、生成中にエラー プロンプトは表示されず、事前レンダリング中に停止するだけです。
                    staticDir: path.join(__dirname,'dist'),
                    // 独自のルーティング ファイルに対応して、たとえば about にパラメーターがある場合は、/about/param1 のように記述する必要があります。
                    ルート: ['/', '/product', '/about'],
                    //設定しないとプリコンパイルが実行されませんrenderer: new Renderer({
                        注入: {
                            foo: 'バー'
                        },
                        ヘッドレス: 偽、
                        // main.js の document.dispatchEvent(new Event('render-event')) では、2 つのイベント名が対応している必要があります。
                        renderAfterDocumentEvent: 'レンダリングイベント'
                    })
                })、
            ]、
        };
    }
}

main.jsに追加する

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App),
  // vue-config.js の renderAfterDocumentEvent の名前: 'render-event' は、mounted() { に対応している必要があります。
    document.dispatchEvent(新しいイベント('render-event'))
  }
}).$mount('#app')

router.js でモードを「history」に設定する

npm run build を実行し、生成された dist ディレクトリに各ルート名に対応するフォルダーがあるかどうかを確認します。

要約する

1. ルーティングには履歴モードを使用するのが最適です。履歴モードを使用せずに生成されたファイルを実行することもできますが、各 index.html ファイルの内容は同じです。

2. 3.0 の設定は 2.0 とほぼ同じですが、注意が必要な箇所がいくつかあります。

2.0ではstaticDirを設定します: path.join(__dirname,'../dist')

3.0ではstaticDirを設定します: path.join(__dirname,'dist')

これら 2 つの設定が間違っている場合、npm run build を実行するとエラーが報告されます。

各ページのタイトルやメタ情報を設定する場合は、[vue-meta-info]を使用することをお勧めします。

Vue シングルページ アプリケーションの事前レンダリングに関するこの記事はこれで終わりです。Vue シングルページ アプリケーションの事前レンダリングに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-cli シングルページ事前レンダリング seo-prerender-spa-plugin 操作

<<:  Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

>>:  初心者のためのWebページ作成: HTMLのハイパーリンクAタグの使い方を学ぶ

推薦する

MySQL テーブルと列のコメントの概要

コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...

MySQL 5.7.30 のインストールとアップグレードの問題に関する詳細なチュートリアル

くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...

Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します

導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...

canvas.toDataURL image/png エラー処理方法の推奨

問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?

選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

CSS3を使用して背景画像の色を変更するさまざまな方法

CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正で...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...

CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

Linuxカーネルをコンパイルする方法

1. 必要なカーネルバージョンをダウンロードする2. オペレーティングシステムにアップロードする3....

TypeScript での関数オーバーロード

目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...