随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了Vue服务端渲染。
关于Vue服务端渲染的原理、搭建，官方文档已经讲的比较详细了，因此，本文不是抄袭文档，而是文档的补充。特别是对于如何与现有项目进行很好的结合，还是需要费很大功夫的。本文主要对我所在的项目中进行Vue服务端渲染的改造过程进行阐述，加上一些个人的理解，作为分享与学习。
概述
本文主要分以下几个方面：
什么是服务端渲染？服务端渲染的原理是什么？ 如何在基于Koa的Web Server Frame上配置服务端渲染？ 基本用法 Webpack配置 开发环境搭建 渲染中间件配置 如何对现有项目进行改造？ 基本目录改造； 在服务端用vue-router分割代码； 在服务端预拉取数据； 客户端托管全局状态； 常见问题的解决方案； 什么是服务端渲染？服务端渲染的原理是什么？
Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
上面这段话是源自Vue服务端渲染文档的解释，用通俗的话来说，大概可以这么理解：
服务端渲染的目的是：性能优势。 在服务端生成对应的HTML字符串，客户端接收到对应的HTML字符串，能立即渲染DOM，最高效的首屏耗时。此外，由于服务端直接生成了对应的HTML字符串，对SEO也非常友好； 服务端渲染的本质是：生成应用程序的“快照”。将Vue及对应库运行在服务端，此时，Web Server Frame实际上是作为代理服务器去访问接口服务器来预拉取数据，从而将拉取到的数据作为Vue组件的初始状态。 服务端渲染的原理是：虚拟DOM。在Web Server Frame作为代理服务器去访问接口服务器来预拉取数据后，这是服务端初始化组件需要用到的数据，此后，组件的
新闻热点
疑难解答
图片精选
