使用prerender-spa-plugin插件对页面进行预渲染

插件引入与配置

    yarn add prerender-spa-plugin --dev

vue.config.js配置

module.exports = {
    // 选项
    publicPath: "./",
    outputDir: "dist",
    assetsDir: "static",
    indexPath: "index.html",
      configureWebpack:{
            resolve: {
                // 配置快捷路径
                alias: {
                    "@": resolve("src")
                }
             },
            plugins: [
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, "dist"),
                routes: ["/", "/test"], // 必备 预渲染生成文件的目录应该和项目打包的生产路径一致
                renderer: new Renderer({
                    inject: {
                        foo: "bar",
                    },
                    headless: true,
                    renderAfterDocumentEvent: "render-event",
                    // maxConcurrentRoutes: 4,
                    // renderAfterTime: 5000
                }),
            }),
          
         ]
       }
  }

new PrerenderSPAPlugin配置

• staticDir: path.join(__dirname, "dist") 打包文件生成的目录
• routes: ["/", "/test"], 必备 需要打包文件的路由 预渲染生成文件的目录，应该和项目打包的生产路径一致，
• maxConcurrentRoutes: 4 使用它来限制并行渲染的路由数量 可选-默认为0，无限制 路由是异步呈现的
• renderAfterTime: 5000, 可选-等待渲染，直到经过一定的时间
• headless: true, 渲染时显示浏览器窗口，调试时有用

官方文档配置

renderAfterDocumentEvent

等待页面上调用了指定的事件后再渲染页面，这个和其他爬虫重要的区别 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 等vue执行mounted生命周期后，表示页面已经挂载完成了，这时再触发自定义事件，告诉插件可以渲染了

    renderer: new Renderer({
           renderAfterDocumentEvent: "render-event",
         }),

new Vue({
  router,
  mounted () { // 等vue执行mounted生命周期后，表示页面已经挂载完成了，这是再触发自定义事件，告诉插件可以渲染了
    document.dispatchEvent(new Event('render-event'))
  },
  render: h => h(App),
}).$mount('#app')

vue-meta-info

为了更好的SEO一般会动态需改meta的内容 vue-meta-info

yarn add prerender-spa-plugin vue-meta-info -D

组件内静态使用metaInfo

<template> ... </template> 
<script> 
           export default { 
                metaInfo: { 
                        title: 'My Example App', // 可以是异步的 
                        meta: [{ name: 'keyWords', content: '预渲染' }] 
                        link: [{ rel: 'asstes', href: 'file.jing999.cn' }] 
                        } 
               } 
</script>

配置完成后

配置完成后先打包再启动项目，打包后可在dist目录看到生成的文件