阅读 415

Vue 服务端渲染 & 预渲染

写在前面

项目代码:github.com/NeverYu

演示地址:git.io/fjkDg

本文着重讲解预渲染以及使用方法,并提供相关技术说明、源码以及演示地址;服务端渲染 内容较多,将在下一次整理发出!

导读

关于 Vue 的 SPA 说的已经太多了(在我之前的多个项目中,已经多次使用到了,包括 sellmusicvue-cms 等多个项目),它为我们带来了极速的开发体验,极强的开发效率。可能唯一有些许不足的就是:当我们对 SEO 很在乎的时候,我们如何去处理 SEO 的需求?

关于 SEO,Vue 也有现成的解决方案:Vue 服务端渲染

那么

什么是服务端渲染

服务端将完整的页面 html 输出到客户端显示,与 SPA (Single-Page-Application)使用 js 来渲染页面有明显区别。

为什么使用服务端渲染

  • 更好的 SEO
  • 更快的内容到达时间

服务端渲染 or 预渲染

就像官网所说的,如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染,一个典型的预渲染使用场景可能类似这个网站

服务端渲染与预渲染的区别

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

如何使用预渲染

预渲染的核心是使用 prerender-spa-plugin,如何使用它呢?我们需要用 npm 安装它,然后在 webpack 中轻轻的引入它即可。

我们还是以本文示例中的这个网站的源代码中的 webpack 配置为例:

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: [ '/', '/home', '/information', '/ticket', '/scenery', '/about' ],
  renderer: new Renderer({
    headless: false,
    renderAfterDocumentEvent: 'render-event'
  })
})
复制代码

PrerenderSPAPlugin 的配置是极其简单的,我们需要简单的配置一下,项目所有的路由,最终生成后有几个页面,都是以这个配置为依据,而不是你在 vue-router 中配置的路由。

然后再配置一下 renderAfterDocumentEvent;整个预渲染过程会在这个事件触发后开始,事件的触发是在 main.js 中做的:

// main.js
mounted () {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))
}
复制代码

main.js 中触发这个事件,PrerenderSPAPlugin 知道 renderAfterDocumentEvent 触发后,就会开始执行预渲染了,这个过程思路是很简单的。

headless 设置为 false 即可,在 npm run build 的时候,会启动一个 Chromium 来进行简单的测试。

细心的人可能会发现:为什么你源码中 headless 配置的是 true 你知道为什么吗?

最基础也最核心的配置项也就这几行代码,当然,如果你有更多的需求配置项,你可以去 github查看文档,文档中有更多的配置说明。

这些代码方面的内容,只要你下载项目源码,或者自己动手尝试,将会非常简单易懂

增强 SEO

有了预渲染以后,整个页面的 SEO 已经很好了。但有时候我们也会需要 meta 信息的动态变化(不同页面有不同的 meta),比如 titlemeta keywords 或者是 link,那么这里我们可以使用 vue-meta-info 这个插件。

vue-meta-info 是一个基于 Vue 2.0 的插件,它会让你更好的管理你的 app 里的 meta 信息。你可以直接在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着页面的变化,自动更新你的 Titlemeta 等信息,那么用此插件非常合适。

具体的使用,这里就不贴代码了,看源码就可以了,在 src/util/meta-info.js 中。

如何搭建一个预渲染开发环境

如果你也想要使用预渲染来开发你的网站的话,最简单的方法就是克隆这个项目,然后根据你的需求,简单删减以后进行二次开发,整个的开发流程和 Vue 是一模一样的。

总结

1、相较于 Vue 的模板中大而全的 webpack 配置项,预渲染中的 webpack 配置简单小巧,如果你有一些额外的 webpack 的配置需求的话,你可能需要自己动手。

2、我的这个项目使用的是 stylus 来作为 css 预编译语言,如果你想使用其他的 css 预编译语言的话,需要额外安装一些插件以及做一些简单配置。当然了,默认的 css 肯定是支持的。

3、在写这个项目的过程中,也有做一些简单的知识点记录,vue-prerender 笔记

4、最后项目打包发布到生产环境,使用 npm run build 一键操作即可。如果你想要部署到子目录下的话,那么,你可能需要做一些简单的修改,具体在 vue-prerender 笔记 有提到。后续如果有需要增加补充的说明,也会在 vue-prerender 笔记中补充。


写在最后

我的主页: neveryu.github.io/index.html

QQ群:685486827

关注下面的标签,发现更多相似文章
评论