第一种方式，在创建 vue 实例时，将需要的数据传入 vue 的模板，使用方法与客户端 vue 一样；运行 server.js 结果如下，数据 data_vue 已经插入到 vue 模板里面了：
➜ vue-ssr-demo node server.js <div data-server-rendered="true">Hello World!</div>
第二种，模板插值，这里我们也直接先放代码：
const data_vue = { word: 'Hello World!' }; const data_tpl = { people: 'Hello People!' }; //第一步，创建vue实例 const Vue = require('vue'); const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>" }); //第二步，创建一个 renderer 实例 const renderer = require('vue-server-renderer').createRenderer({ template: "<!--vue-ssr-outlet--><div>{{people}}</div>" }); //第三步，将vue渲染为HTML renderer.renderToString(app, data_tpl, (err, html)=>{ if(err){ throw err; } console.log(html); });
这里我们增加了数据 data_tpl，你会发现，在 renderToString 方法中传入了这个参数，那么这个参数作用在哪里呢？这就要看下官网中关于 和 renderToString 方法的介绍了，
createRenderer: 使用（可选的）选项创建一个 Renderer 实例。 const { createRenderer } = require('vue-server-renderer') const renderer = createRenderer({ / 选项 / })
在选项中，就有一个参数叫 template，看官网怎么说的：
template: 为整个页面的 HTML 提供一个模板。此模板应包含注释 <!--vue-ssr-outlet-->，作为渲染应用程序内容的占位符。
为整个页面的 HTML 提供一个模板。此模板应包含注释 <!--vue-ssr-outlet-->，作为渲染应用程序内容的占位符。
模板还支持使用渲染上下文 (render context) 进行基本插值：
使用双花括号 (double-mustache) 进行 HTML 转义插值 (HTML-escaped interpolation)；
使用三花括号 (triple-mustache) 进行 HTML 不转义插值 (non-HTML-escaped interpolation)。
根据介绍，在创建 renderer 实例时，可以通过 template 参数声明一个模板，这个模板用来干嘛呢？就用来挂载 vue 模板渲染完成之后生成的 HTML。这里要注意一下，当创建 renderer 实例时没有声明 template 参数，那么默认渲染完就是 vue 模板生成的 HTML；当创建 renderer 实例时声明了 template 参数，一定要在模板中增加一句注释 “<!--vue-ssr-outlet-->” 作为 vue 模板插入的占位符，否则会报找不到插入模板位置的错误。
再次运行 server.js ，结果如下，vue 模板已成功插入，且 template 模板中的 {{people}} 变量也因在 renderToString 方法中第二位参数的传入，显示了数据：
vue-ssr-demo node server.js <div data-server-rendered="true">Hello World!</div><div>Hello People!</div>
如果我们把 template 换成一个 HTML 页面的基本架构，来包裹 vue 模板，是不是就能得到一个完整页面了呢？我们来试一下：
const data_vue = { word: 'Hello World!' }; const data_tpl = { people: 'Hello People!' }; //第一步，创建vue实例 const Vue = require('vue'); const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>" }); //第二步，创建一个renderer const renderer = require('vue-server-renderer').createRenderer({ template: `<!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <!--vue-ssr-outlet--><div>{{people}}</div> </body> </html>` }); //第三步，将vue渲染为HTML renderer.renderToString(app, data_tpl, (err, html)=>{ if(err){ throw err; } console.log(html); });
运行 server.js ，结果如下，我们得到了一个完整的 HTML 页面，且成功插入了数据：
vue-ssr-demo node server.js <!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <div data-server-rendered="true">Hello World!</div><div>Hello People!</div> </body> </html>
好，现在页面生成了，该怎么显示呢？这里我们借助下框架 Koa 实现，先来安装：
npm install koa -S
然后修改 server.js ，如下：
const data_vue = { word: 'Hello World!' }; const data_tpl = { people: 'Hello People!' }; const Koa = require('koa'); //创建 koa 实例 const koa = new Koa(); const Vue = require('vue'); //创建一个renderer const renderer = require('vue-server-renderer').createRenderer({ template: `<!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <!--vue-ssr-outlet--><div>{{people}}</div> </body> </html>` }); // 对于任何请求，app将调用该异步函数处理请求： koa.use(async (ctx, next) => { // await next(); //创建vue实例 const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>" }); //将vue渲染为HTML const body = await renderer.renderToString(app, data_tpl); ctx.body = body; }); // 在端口3001监听: koa.listen(3001); console.log('app started at port 3001...');
运行 server.js :
vue-ssr-demo node server.js app started at port 3001...
然后打开浏览器，输入网址 :3001/ ，即可看到运行后的效果。