写在前面
项目代码:github.com/NeverYu
演示地址:git.io/fjkDg
本文着重讲解预渲染以及使用方法,并提供相关技术说明、源码以及演示地址;服务端渲染 内容较多,将在下一次整理发出!
导读
关于 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