序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル
>>: 初心者のためのWebページ作成: HTMLのハイパーリンクAタグの使い方を学ぶ
コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...
くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...
問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...
この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...
選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...
目次1. React.Children.map 2. React.Children.forEach ...
CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正で...
1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...
昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...
この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...
2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...
クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...
1. 必要なカーネルバージョンをダウンロードする2. オペレーティングシステムにアップロードする3....
目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...