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

app.js：

const Vue = require("vue");
const createRouter = require("./router")
module.exports = (context) => {
  const router = createRouter();
  return new Vue({
    router,
    data:{
      message:"Hello,Vue SSR!"
    },
    template:`
      <div>
        <h1>{{message}}</h1>
        <ul>
          <li>，
            <router-link to="/">首页<router-link/>
          </li>
          <li>
            <router-link to="/about">关于我<router-link/>
          </li>
        </ul>
      </div>
      <router-view></router-view>
    `
  });
}

做完这些东西貌似好像就能用了一样，但是还是不行，仔细想想好像忘了一些什么操作，刚刚把vue实例从index.js中抽离出来了，但是却没有在任何地方使用它，哈哈，好像是一件很尴尬的事情。

修改index.js文件：

const express = require("express");
const vueApp = require("./src/app.js");
const vueServerRender = require("vue-server-render").creteRender();
const app = express();
app.get('*',(request,respones) => {
  // 这里可以传递给vue实例一些参数
  let vm = vueApp({})
  respones.status(200);
  respones.setHeader("Content-Type","text/html;charset-utf-8;");
  vueServerRender.renderToString(vm).then((html) => {
    respones.end(html);
  }).catch(error => console.log(error));
})
app.listen(3000,() => {
  console.log("服务已启动")
});

准备工作都已经做好啦，完事具备只欠东风啦。现在运行一下npm start可以去页面上看一下效果啦。看到页面中已经渲染出来了，但是好像是少了什么？虽然导航内容已经都显示出来了，但是路由对应的组件好像没得渲染噻。具体是什么原因导致的呢，vue-router是由前端控制渲染的，当访问路由的时候其实，在做首屏渲染的时候并没有授权给服务端让其去做渲染路由的工作。(⊙﹏⊙)，是的我就是这么懒…

这个问题解决方案也提供了相对应的操作，不然就知道该怎么写下去了。既然在做渲染的时候分为服务端渲染和客户端渲染两种，那么我们就需要两个入口文件，分别对应的服务端渲染的入口文件，另个是客户端渲染的入口文件。

在src文件夹下面添加两个.js文件(当然也可以放到其他地方，这里只是为了方便),entry-client.js这个文件用户客户端的入口文件，entry-server.js那么这个文件则就作为服务端的入口文件。既然入口文件已经确定了，接下来就是要解决刚才的问题了,首先解决的是服务端渲染，在服务端这里需要把用户所访问的路径传递给vue-router，如果不传递给vue-router的话，vue-router会一脸懵逼的看着你，你什么都不给我，我怎么知道渲染什么？