vue中的SEO设置，使用prerender-spa-plugi

1、安装  npm install prerender-spa-plugin     npm install vue-meta-info

2、vue.config.js

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

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

// eslint-disable-next-line no-unused-vars

const webpack = require('webpack')

const path = require('path')

module.exports = {

    // 资源路径

    publicPath: '/',

    // 如果你不需要使用eslint，把lintOnSave设为false即可

    lintOnSave: false,

    configureWebpack: config => {

        if (process.env.NODE_ENV !== 'production') return

        return {

            plugins: [

                new PrerenderSPAPlugin({

                    // 生成文件的路径，也可以与webpakc打包的一致。

                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。

                    staticDir: path.join(__dirname, 'dist'),

                    // outputDir: path.join(__dirname, './'),

                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。

                routes: ['/about', '/contact'], 

                    // 这个很重要，如果没有配置这段，也不会进行预编译

                    renderer: new Renderer({

                        inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值

                            foo: 'bar'

                        },

                        headless: false,

                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。

                        renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机

                    })

                })

            ]

        }

    }

}

3、main.js加入下列内容：注意mounted中触发事件， 必须采用history模式

import MetaInfo from "vue-meta-info"; //seo单页面配置插件

Vue.use(MetaInfo)

new Vue({

  router,

  store,

  render: h => h(App),

//// 添加mounted，不然不会执行预编译

  mounted(){

    document.dispatchEvent(new Event('render-event'))

  }

}).$mount("#app");

4、在页面中使用，注意在vue.config.js的routes中加上路径

<template>

  <div class="about">

    <h1>联系我们页面</h1>

  </div>

</template>

<script>

export default {

    metaInfo: {

    title: '我是contact头', // set a title

    meta: [{             // set meta

      name: 'keyWords',

      content: '我是contact关键字'

    },

    {

      name: 'description',

      content: '我是contact描述'

    }],

    link: [{ // set link

      rel: 'asstes',

      href: 'https://assets-cdn.github.com/'

    }]

  }

}

</script>

打包后的项目，所有配置单独路由的都有

什么场景下不适合使用预渲染

个性化内容：对于路由是 /my-profile 的页面来说，预渲染就失效了。因为页面内容依据看它的人而显得不同；

经常变化的内容：如果你预渲染一个游戏排行榜，这个排行榜会随着新的玩家记录而更新，预渲染会让你的页面显示不正确直到脚本加载完成并替换成新的数据。这是一个不好的用户体验；

成千上万的路由：不建议预渲染非常多的路由，因为这会严重拖慢你的构建进程。

Prerender SPA Plugin

prerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此，该插件限定了你的单页应用必须使用 webpack 构建，且它是框架无关的，无论你是使用 React 或 Vue 甚至不使用框架，都能用来进行预渲染。

prerender-spa-plugin 原理

那么 prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢？原理很简单，就是在 webpack 构建阶段的最后，在本地启动一个 phantomjs，访问配置了预渲染的路由，再将 phantomjs 中渲染的页面输出到 html 文件中，并建立路由对应的目录。