VUE服务端渲染流程

最终代码地址

开发模式下的服务端渲染

• 在开发模式下需要启动两个服务，第一个是前端的服务。与vue脚手架的服务基本上一样，纯前端渲染的 8000 端口服务。
• 第二个是服务器的服务，通过node的koa启动服务器的3333端口服务。

开发环境下的示意图

流程

• serverCompiler去获取压缩前端的资源生成一个能在服务器使用的server bundle。里面包含了前端的资源。
• 通过VueServerRenderer插件渲染bundle。也就是渲染vue自己打包生成的html文件。
• 组装html的页面，和store的数据，以及meta等信息，组成一个完整的html，返回给前端页面。

代码流程

• 创建server-entry.js。提供给webpack.config.server.js 的入口。
• 创建webpack.config.server.js 通过server-entry.js。入口，将前端资源或者需要请求到的数据整合，打包成服务端使用的资源，最终会打包成一个json文件，里面包含了服务端所需要的前端资源。
• 创建server，通过koa开启端口。将所有页面路由的资源都转到服务端渲染下。
• 创建dev-ssr.js，通过serverCompiler打包出前端的资源。
• 创建server-render，将数据和页面整合到html中，然后返回给前端。

正式环境下的服务端渲染

• 在正式服务器下，我们就不需要开启8000端口，我们已经将前端的资源都打包成压缩文件，只要去访问资源就可以。在正式环境下的流程会比调试下的东西少很多。

  
  正式环境下的服务端渲染