JIA's blog

温故而知新

Home Archives Tags About

prerender-spa-plugin 实现vue预渲染

2020-10-22 2 min read # 前端性能优化 # vue

为什么要做预渲染？
预渲染配置生成多页面，解决首屏白屏问题，提升用户体验。同时配合vue-meta-info可以生成title和meta标签，解决单页面应用seo问题。

如何使用prerender-spa-plugin？

  1. 安装prerender-spa-plugin和vue-meta-info
    cnpm install prerender-spa-plugin vue-meta-info --save

  2. router.js中，将路由模式改为history

  3. vue2.0项目在webpack.prod.conf.js中配置prerender-spa-plugin

const PrerenderSpaPlugin = require('prerender-spa-plugin')
const renderer = PrerenderSpaPlugin.PuppeteerRenderer

//plugins中加入
new PrerenderSpaPlugin({
    // 编译后html存放的路径
    staticDir: path.join(__dirname, '../dist'),
    // 需要做预渲染的路由
    routes: ['/about'],
    // 配置renderer，选择预渲染使用的引擎，否则不会进行预编译
    renderer: new renderer({
        // 监听document.dispatchEvent事件，决定什么时候开始渲染，需要在main.js中加入如下配置
        renderAfterDocumentEvent: 'render-event'
    })
})

new Vue({
    ...,
    mounted(){
        document.dispatchEvent(new Event('render-event'))
    }
})
  1. 使用vue-meta-info
  • 在main.js中引入vue-meta-info并安装
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
  • 组件内配置MetaInfo
<template>
    <div>about page.....</div>
</template>

<script>
    export default{
        metaInfo:{
            title: '关于我们',
            meta: [
                {
                    name: 'keywords',
                    content: '这个页面是about'
                }
            ]
        }
    }
</script>
  1. 配置完成后运行npm run build就可以在dist目录内看到预渲染后的html文件了
AzhA RSS