Vue中及单页面应用前端预渲染优化（SEO）

第一步安装包：

npm install prerender-spa-plugin -D

第二步配置文件：

        在bulid文件index.js中，或者webpack的配置文件中进行配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

    new PrerenderSPAPlugin({
     //预编译的决定路径
      staticDir: path.join(__dirname, 'dist'),
      // 需要进行预编译的路由
      routes: [ '/', '/about', '/some/deep/nested/route' ],
      //下面这个很重要，如果没有这个不会进行预编译
      renderer: new Renderer({
        injectProperty: '__PRERENDER_INJECTED',
          foo: 'bar'
        },
        renderAfterDocumentEvent: 'custom-render-trigger',
        headless: false 
      })
    })

第三步使用：

        在main.js中使用

 //在Vue实例的配置文件中使用
 mounted() {
    document.dispatchEvent(new Event('custom-render-trigger'))
  },