prerender-spa-plugin预渲染插件优化seo

1、配置步骤

（1）webpack.prod.conf.js

// 预渲染
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins: [
...
// 预渲染
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),
      // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
      routes: ['/', '/serveTerms','/privaPolicy','/homeBroadCast','/homeProductList'],


      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        // headless: false,
        renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        args: ['--no-sandbox', '--disable-setuid-sandbox']
      })
    })
]

（2）main.js

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  // 预渲染
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

2、另外可安装 vue-meta-info 插件来管理meta

（1）main.js

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

（2）创建vue-meta-info.js

export default {
  homeBroadCast: {
    title: '我是一个title[homeBroadCast]',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字1,关键字1'
      },
      {
        name: 'description',
        content: '这是一段网页的描述1'
      }
    ]
  },
  serveTerms: {
    title: '我是一个title[serveTerms]',
    meta: [
      {
        name: 'keywords',
        content: '关键字2,关键字2,关键字2'
      },
      {
        name: 'description',
        content: '这是一段网页的描述2'
      }
    ]
  },
  privaPolicy: {
    title: '我是一个title[privaPolicy]',
    meta: [
      {
        name: 'keywords',
        content: '关键字3,关键字3,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述3'
      }
    ]
  },
  homeProductList: {
    title: '我是一个title[HomeProductList]',
    meta: [
      {
        name: 'keywords',
        content: '关键字3,关键字3,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述3'
      }
    ]
  }
}

(3)组件中使用meta

import vueMetaInfo from '@/assets/vue-meta-info.js'
export default {
  metaInfo: vueMetaInfo.homeBroadCast,
}

3、打包成功的项目目录