Vue预渲染prerender-spa-plugin+vue-meta-info

//npm 
npm install prerender-spa-plugin --save
//yarn
yarn add prerender-spa-plugin --dev

// 预渲染
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer



plugins: [

    // 预渲染
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),
 // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
      routes: ['/', '/index'],
// 这个很重要，如果没有配置这段，也不会进行预编译
      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']
        navigateOptions:{
          timeout: 0,
        }
      })
]

  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }

npm install vue-meta-info --save

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

//单个页面配置
<template>
    <div>首页</div>
</template>
export default {
    name:'首页'
    metaInfo:{
        title:'首页',
        meta:[
            {
                name: 'keyWords',
                content:'关键字'
            },
            {
                name:'description',
                content:'描述'
            }
        ]
    }
}
//多页面配置
<template>
    <div>首页</div>
</template>
export default {
    name:'index'
    metaInfo():{
        return{
            meta:this.metaData
        }
    },
    data(){
        return{
            metaData:''
        }
    },
    watch:{
        $route(to,form){
        //通过跳转页面配置每个页面的关键字和描述，这只是个例子
        //注意如果通过to.path去判断 需要进行兼容判断 因为渲染后的访问路径会在末尾自动添加/ 例如 loclhost:3000/index/,这个时候就需要 to.path === '/index' || to.path==='/index/'
            if(to.name === 'index'){
                this.metaData=[
                    {
                        name: 'keyWords',
                        content:'关键字'
                    },
                    {
                        name:'description',
                        content:'描述'
                    }
                ]
            }
            //当然也可以封装一个方法去返回每个页面的文案
            //this.metaData = metaSetFuc(to.name)
        }
    }
}

export default {
  index: {
    title: 'title',
    meta: [
      {
        name: 'keywords',
        content: ''
      },
      {
        name: 'description',
        content: ''
      }
    ]
  },
}

//导入存放的文件路径
import VueMetaInfo from '../assets/vue-meta-info.js'
export default {
  metaInfo: VueMetaInfo.index,
}

await page.goto(`${baseURL}${route}`, navigationOptions);
//修改为
await page.goto(`${baseURL}${route}`, {...navigationOptions, timeout: 0});