vue预渲染

服务端渲染VS预渲染
  服务端渲染：将完整的 html 输出到客户端，又被认为是‘同构’或‘通用’
        优点：首次渲染快（无需等待所有js都完成下载）；
           利于SEO，节能
        缺点：开发受限
           需要处于Node.js server运行环境；
           更多的服务器负载（占用更大的CPU资源）
  预渲染：  获得服务端渲染的优点
        对特定路由生成静态HTML文件，前端作为一个完全静态的站点
        无需使用web服务器实时动态编译HTML
        改善少数页面的SEO,可采用预渲染
        若网站有成百上千条路线，预编译会非常缓慢（此情况慎用）

预渲染核心：prerender-spa-plugin
安装：   cnpm install prerender-spa-plugin --save-dev

build/webpack.prod.conf.js中进行配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// plugins插件里书写
plugins: [
   new PrerenderSPAPlugin({
      // 生成文件的路径，这个目录只能有一级。若目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动
      staticDir: path.join(__dirname, '../dist'),
      // 对应自己的路由文件
      routes: [ '/', '/moviesDetail'],
      // 若没有这段则不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event'
      })
    }),
]

main.js中进行配置

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

cnpm run build打包运行生成的目录如下，则证明此次操作成功

image.png

注：预渲染方式下的route需采用history模式，否则每个打包生成的index.html的文件内容会一样

export default new Router({
    mode: 'history',
    routes: [
        //...
    ]
})

vue-meta-info插件，网页meta标签
安装： cnpm install vue-meta-info --save-dev

main.js中进行配置

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

在xxx.vue文件里配置

export default {
    // 这些代码会转成网页的meta标签里的内容
    metaInfo: {
        title: '标题',
        meta: [
            {
                name: 'keywords',
                content: '关键字'
            },
            {
                name: 'description',
                content: '网页描述'
            }
        ]
    }