基于webpack4搭建Vue服务端渲染（SSR）

前言

了解服务端渲染是偶然间一位朋友问了我Nuxt.js的问题，孤陋寡闻的我竟然不知道服务端渲染是什么！赶紧利用空余时间充电，了解大概后觉得正好能解决我当前正遇到的问题，随着我项目的功能逐步扩展首屏加载白屏越来越明显，正好利用这个机会看能不能做些优化，当然服务端渲染能带来的好处不仅限于此，如果当你看到这篇博客的时候你还不了解服务端渲染，那我建议你可以先看看搜索引擎优化_百度百科，当然随着现在发展，很多网站的入口已经由百度搜索变成公众号推广、二维码等等，好像SEO变得不在那么重要，大家根据自己需求做取舍吧。

Vue SSR 指南

Vue官网的Vue.js 服务器端渲染指南我建议还是认真的通读一遍，有几个点你要特别注意下，首先Vue的服务端渲染依靠的是vue-server-renderer，那这个包运行环境依赖Node.js的模块，所以这是比较重要的一点你要有node的一些基础，因为服务端渲染整不好就报500别出了问题hold不住，当然部署也需要考虑。路由和数据存储官方的建议使用vue-router和vuex，官方已经给出了一个SSR的 HackerNews Demo，webpack是基于3+版本来做的，如果升级到4需要一些配置更改，强烈建议有一定webpack基础的同学再来搞webpack升级，而且babel也是7版本一下，不过babel比较好搞定的。

先来个Demo

我在学习的过程中也clone了HackerNews Demo，该项目中的news请求api一直请求不了，不知道是墙的原因还是这个api接口暂停了，所以官方的demo我就没跑起来。按着他的思路我试着自己搭建一下，webpack4和babel7更改比较大，也学习了很多，我已经把我自己搭建的纯净版本放在了github上，我会慢慢更新加入更多有趣的东西，为什么叫纯净版，因为它只能运行起来什么都还没加入，方便如果有搭建有些问题的小伙伴https://github.com/mtgr1020/vue-ssr-webpack4，我将pure分支作为纯净版本，为什么要先放demo，你先试一下能否运行，运行不起来那这篇博客对你没什么参考价值。