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

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

定数パス = 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: 'レンダリングイベント'
      })
    })
]

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

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

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: 'レンダリングイベント'
                    })
                }）、
            ]、
        };
    }
}

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