vue项目配置预渲染

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

单页面应用优化了用户体验的同时也经常涉及到SEO和受屏渲染问题，而服务端渲染和预渲染都可以解决这些问题，本文主要记录一下vue项目预渲染如何配置。

1.简介

预渲染：构建阶段生成匹配预渲染路径的html文件（每个需要预渲染的路由都会生成一个对应的html文件）。构建出的html文件已经有部分内容，减少白屏时间。

预渲染能与服务端渲染一样提高SEO优化，只需要在项目中进行一些配置，实现成本低。并且在弱网环境下，预渲染能更快的呈现页面内容，减少页面可见时间。

2.配置

首先，配置预渲染需要在项目中安装prerender-spa-plugin插件，并在vue.config.js和main.js文件中进行一些配置。

// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
...
// 配置预渲染
config.when(process.env.NODE_ENV !== 'development', config => {
  config.plugin('prerender-spa-plugin')
    .use(PrerenderSPAPlugin, [{
      // 必须 - app出口，和outputDir一致就好.
      staticDir: resolve('dist'),
      // 必须 - 需要预渲染的路由.
      routes: ['/', '/about'],
      // 必须 - 模拟浏览器渲染
      renderer: new Renderer({
        // 渲染时打开浏览器debug
        headless: true,
        // 渲染时机，正确的时机保证渲染页面的完整性
        renderAfterDocumentEvent: 'render-event'
      })
    }])
})
...

// main.js
new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

注意：

• 预渲染的单页应用路由需要使用 History 模式而不是 Hash 模式。
• 插件使用npm安装很多时候会安装不成功，这时候使用cnpm安装即可。
• npm build打包好后可以从dist文件夹中查看是否有生成了预渲染文件，如果说则说明配置成功。