Vue で Web ページを事前レンダリングするにはどうすればよいですか? prerender-spa-plugin の使用法の簡単な分析

Vue で Web ページを事前レンダリングするにはどうすればよいですか?この記事では、Vue が prerender-spa-plugin を使用して Web ページを事前レンダリングする方法を紹介します。

プリレンダリング

通常、Vue プロジェクトは単一ページのプロジェクトです。つまり、レンダリングされたプロジェクトには index が 1 つだけあります。 html。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

これの欠点は明らかです:

• Nginx にデプロイするには、 を行う必要があります。 try_files $uri $ uri/ /index.html内部リダイレクト。ルーティングを通じてページにアクセスできます。
• SEO は優しくなく、検索エンジンのインデックス効果も良くありません。

そして、プリレンダリングとは、元の単一の index.html を複数のディレクトリにレンダリングすることであり、各ディレクトリには別の index.html があります。これにより、内部リダイレクト アクセス ルートの必要性がなくなり、検索エンジンに含まれやすくなります。

prerender-spa-plugin

このプリレンダリングでは、プリレンダリングに prerender-spa-plugin を使用します。

その主な原則は、ブラウザを起動し、レンダリングが完了した後に HTML を取得し、ディレクトリを作成して index.html として保存することです。

注:

• 公式 Web サイトには現在、Vue2.x デモのみがあり、実際には Vue3 をサポートしています (このデモでも Vue3 を使用しています)
• 最新のものではありますが、リリースされたバージョンは2018年です（最近新しいバージョンがリリースされるはずです）が、メンテナンスされており、使用できます。

インストール

まず、npm を使用してインストールします。

npm i prerender-spa-plugin

注意する必要があります。

prerender-spa-plugin は Chromium をインストールするため、インストールには長い時間がかかります。

#もちろん、この依存関係はパッケージ化する場合にのみ使用されます。

npm i prerender-spa-plugin -D

プロジェクト リファレンス

さて、プロジェクト リファレンスの説明に入りますが、使用方法は非常に簡単で、2 か所に追加するのが便利です。 :

App.vue
vue.config.js

App.vue

まず、

App.vue にトリガー イベントを追加します。

mounted() {
  document.dispatchEvent(new Event('render-event'))
}

このトリガーを追加すると、後続のパッケージ化が完了したときに自動的にトリガーされ、レンダリングが完了します。

vue.config.js

prerender-spa-plugin プロジェクト ドキュメントによると:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

同時に、一部の高度な使用法では、カスタマイズのために

PuppeteerRenderer を導入する必要があります。したがって、私自身の vue.config.js 構成:

module.exports = {
    ……
    chainWebpack: config => {
        if (process.env.NODE_ENV == "development") {
        ……
        }
        if (process.env.NODE_ENV == "production") {
            config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [
                {
                    staticDir: path.join(__dirname, 'dist'),
                    routes: [
                        '/', '/processIMG', '/statisticsChars', '/generatePWD', '/calculateTheDate',
                        '/randomNumber', '/textBase64', '/curl', '/mcstatus',
                        '/gh', '/about', '/mdv'
                    ],
                    renderer: new PuppeteerRenderer({
                        headless: false,
                        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
                        // 对应App.vue 
                        renderAfterDocumentEvent: 'render-event',
                    }),
                }])
            ])
        }
    }

チェーン関数を使用します。これの利点は、

if-else などの機能的な判断が容易になることです。 その中で、renderer 属性:

• headless: これは Chrome の headless 属性で、デバッグによく使用されます。詳細については、次を参照してください: Google Chrome
• executablePath: ブラウザのアドレスをリダイレクトします。ここでのリダイレクトには、コンピュータに付属の Chrome ブラウザを使用します。 (オプション。直接追加することはできません。デフォルトで Chromium が呼び出されます)
• renderAfterDocumentEvent: document.dispatchEvent(new Event('render-event) と同じイベント名である必要がありますApp.vueの'))に対応します。

そして、

routes 配列には、事前にレンダリングする必要があるルーティング アドレスが含まれています。

もちろん、その他のオプションのパラメータについては、公式ドキュメントを参照することもできます:

staticDir はコンパイルされた出力フォルダーを指す必要があります。

プロジェクトのパッケージ化

その後、プロジェクトをパッケージ化できます:

npm run build

パッケージ化後の効果:

# # プリレンダリングされたページを見てください:

Vue-meta を使用するコンポーネントがあるため、プリレンダリングされたファイルにもメタ属性があります。

如果你也想用Vue-meta组件配合prerender-spa-plugin，可以参考文章：

https://juejin.cn/post/7056972997894094861

需要注意，如果出现什么错误，可以尝试：

# 删除项目node_modules
rm -rf node_modules
# 重新安装
npm install

这样的文件，就可以进行部署了。

部署效果

我们使用Nginx进行部署，上次到Nginx Web文件夹内，修改config文件，就不需要：

location / {
  try_files $uri $uri/ /index.html;
}

来实现内部重定向了。因为有真实的目录，可以去掉。

但是，数据代理，最好使用Nginx来实现。比如，开发环境，数据代理：

config.devServer.proxy({
        '/dataApiJava': {
            target: JavaBaseURL,
            pathRewrite: {'^/dataApiJava': ""},
            ws: true,
            changeOrigin: true
        },
        '/dataApiPython': {
            target: PythonBaseURL,
            pathRewrite: {'^/dataApiPython': ""},
            ws: true,
            changeOrigin: true
        },
        '/ghs': {
            target: GithubSpeedURL,
            pathRewrite: {'^/ghs': ""},
            ws: true,
            changeOrigin: true
        }
    }
)

对应的Nginx配置，可以这样写：

location /dataApiPython/{
      proxy_pass http://127.0.0.1:8099/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
}
location /dataApiJava/ {
      proxy_ssl_server_name on;
      proxy_pass https://…….cn/;
}
location /ghs/ {
      proxy_ssl_server_name on;
      proxy_pass https://……/gh/;
}

给大家展示三种配置，按需设置哦。

END

到此，我们的前端预渲染就完成了。这样SEO好。但是对比SSR，还是优点欠缺。好处就是部署和配置方便，坏处就是构建麻烦，如果你页面有几十个路由需要预渲染，那么prerender-spa-plugin渲染起来就没SSR方便了。

改天有机会和大家分享分享SSR吧,真不错，又挖一个坑。

另外，是不是有小伙伴好奇，我截图里出现的CompressionPlugin属性？其实是gz压缩啦。有机会和大家分享，使用compression-webpack-plugin来优化项目。

更多编程相关知识，请访问：编程入门！！

以上がVue で Web ページを事前レンダリングするにはどうすればよいですか? prerender-spa-plugin の使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。