Vue使用prerender-spa-plugin做预渲染，用于SEO优化

现在vue使用比较普遍，可是单页面不利于SEO，不容易被收录，本文就一起学习使用prerender-spa-plugin+vue-meta-info做一个预渲染。vue-meta-info有专门文章介绍，本文就不多赘述了

1.安装

yarn add prerender-spa-plugin

2.创建vue.config.js文件

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')
module.exports = {
    configureWebpack: () => {
        if (process.env.NODE_ENV !== 'production') return
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname, 'dist'),
                    // 下面就是你自己写的页面路径
                    routes: ['/', '/enterprise', '/directory', '/consultList', '/news/detailId', "/cooperate","/404"],
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: true,
                        renderAfterDocumentEvent: 'render-event'
                    })
                })
            ]
        }
    },
}

3.修改main.js里面的内容

new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    setTimeout(() => {
      document.dispatchEvent(new Event('render-event'))
    }, 5000)
  }
}).$mount('#app')

用setTimeout 是因页面不是完全的静态页面，5000用于获取数据后再保存渲染结果

4.使用yarn build命令打包后，会生成对应的目录

用这个插件路由mode必须是historyo！如果本文对你有所帮助就点个赞吧，谢谢~~~///(^v)\~~~