vue/vue-cli+express手把教你搭建SSR

改动如下：

const express = require("express");
const Vue = require("vue");
const vueServerRender = require("vue-server-render").creteRender();
const app = express();
app.get('*',(request,respones) => {
  const vueApp = new Vue({
    data:{
      message:"Hello,Vue SSR!"
    },
    template:`<h1>{{message}}</h1>`
  });
  respones.status(200);
  respones.setHeader("Content-Type","text/html;charset-utf-8;");
  vueServerRender.renderToString(vueApp).then((html) => {
    respones.end(html);
  }).catch(error => console.log(error));
})
app.listen(3000,() => {
  console.log("服务已启动")
});

上述操作完成之后，一定要记得保存，然后重启服务器，继续访问一下locahost:3000，就会看到在服务端写入的HTML结构了。这样做好像给我们添加了大量的工作，到底与在web端直接使用有什么区别么？

接下来见证奇迹的时刻到了。在网页中右键查看源代码就会发现与之前的在web端使用的时候完全不同，可以看到渲染的模板了。如果细心的就会发现一件很有意思的事情，在h1标签上会有一个data-server-rendered=true这样的属性，这个可以告诉我们这个页面是通过服务端渲染来做的。大家可以去其他各大网站看看哦。没准会有其他的收获。

上面的案例中，虽然已经实现了服务端预渲染，但是会有一个很大的缺陷，就是我们所渲染的这个网页并不完整，没有文档声明，head等等等，当然可能会有一个其他的想法，就是使用es6的模板字符串做拼接就好了啊。确实，这样也是行的通的，但是这个仍是饮鸩止渴不能彻底的解决问题，如果做过传统MVC开发的话，就应该知道，MVC开发模式全是基于模板的，现在这种与MVC有些相似的地方，同理也是可以使用模板的。在dome文件夹下创建index.html，并创建好HTML模板。

模板现在有了该如何使用？在creteRender函数可以接收一个对象作为配置参数。配置参数中有一项为template,这项配置的就是我们即将使用的Html模板。这个接收的不是一个单纯的路径，我们需要使用fs模块将html模板读取出来。

其配置如下：

let path = require("path");
const vueServerRender = require("vue-server-render").creteRender({
  template:require("fs").readFileSync(path.join(__dirname,"./index.html"),"utf-8")
});

现在模板已经有了，在web端进行开发的时候，需要挂在一个el的挂载点，这样Vue才知道把这些template渲染在哪，服务端渲染也是如此，同样也需要告诉Vue将template渲染到什么地方。接下来要做的事情就是在index.html中做手脚。来通知creteRender把template添加到什么地方。