写在前面

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

导读

关于 Vue 的 SPA 说的已经太多了（在我之前的多个项目中，已经多次使用到了，包括 sell，music，vue-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），比如 title、meta keywords 或者是 link，那么这里我们可以使用 vue-meta-info 这个插件。

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

具体的使用，这里就不贴代码了，看源码就可以了，在 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

Vue 服务端渲染 & 预渲染