vue-cli3 预渲染的实现prerender-spa-plugin&vue-meta-info

预渲染的使用场景更多是我们所说的静态页面的形式。服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。

1. 依赖下载

npm install prerender-spa-plugin vue-meta-info -D

2. 配置vue.config.js

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

module.exports = {
  configureWebpack: config => {
    if(process.env.NODE_ENV === 'production') {
      return {
        plugins: [ 
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'), // Required - The path to the webpack-outputted app to prerender.
            routes: ['/home','/about'], // 需要预编译的路由，来自vue的路由
            renderer: new Renderer({  // 这个很重要，如果没有配置这段，也不会进行预编译
                inject: {
                  title: '预渲染注入信息'
                },
                headless: false ,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
            })
          })
        ]
      }
    }
  }
}

3. 配置main.js

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted () { /* 分发预渲染事件 */
    document.dispatchEvent(new Event('render-event'))
  }
})

4. 在预渲染页面配置页面的meta 信息：关键词、描述等

export default {
  metaInfo: {
      title: '首页',
      meta: [
          {
              name: 'keywords',
              content: 'vue,前端技术,测试一下'
          },
          {
              name: 'description',
              content: '这是关于预渲染的首页'
          }
      ]
  },
  name: 'Home',
  data() {
    return {
      name: '预渲染的实现'
    }
  }
}  

5. 关于vue-route的模式，两种都可以，推荐使用history
6. 构建预渲染页面npm run build