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

return reject({
code:404,
});
}
reslove(app);
},reject)
})
}

既然实例又发生了变化，需要对应发生变化的index.js同样也需要做出对应的改动。把刚才的引入vue实例的路径改为entey-server.js，由于这里返回的是一个Promise对象，这里使用async/await处理接收一下，并拿到vue实例。不要忘了把router所需要的url参数传递进去。

index.js:

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

这下子就完成了，启动项目吧，当访问根路径的时候，就会看到刚才缺少的组件也已经渲染出来了，当然我们也可以切换路由，也是没有问题的。大功告成。。。好像并没有emmmmmmmmm，为什么，细心的话应该会发现，当我们切换路由的时候，地址栏旁边的刷新按钮一直在闪动，这也就是说，我们所做出来的并不是一个单页应用（手动笑哭），出现这样的问题也是难怪的，毕竟我们没有配置前端路由，我们把所有路由的控制权都交给了服务端，每次访问一个路由的时候，都会向服务端发送一个请求，返回路由对应的页面。想要解决这个问题，当处于前端的时候我们需要让服务端把路由的控制权交还给前端路由，让前端去控制路由的跳转。

之前在src文件夹下面添加了两个文件，只用到了服务端的文件，为了在客户端能够交还路由控制权，要对web端路由进行配置。由于在客户端在使用vue的时候需要挂载一个document，因为vue的实例已经创建完成了，所以，这里需要使用$mount这个钩子函数，来完成客户端的挂载。同样为了解决懒加载这种类似的问题so~同样需要使用onReady里进行路由的处理，只有当vue-router加载完成以后再去挂载。

在客户端是使用的时候很简单，只需要把路由挂载到app里面就可以了。

entry-client.js

const createApp = require("./app.js");
let {app,router} = createApp({});
router.onReady(() => {
  app.$mount("#app")
});

整个项目的雏形也就这样了，由于服务端把路由控制权交还给客户端，需要复杂的webpack配置，so~不再赘述了，下面直接使用vue-cli继续（做的是使用需要用到上面的代码）。