更改index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
可以发现，在html的body里面添加了一段注释，当将vueServerRender编译好的html传到模板当中之后这个地方将被替换成服务端预编译的模板内容，这样也算是完成一个简单的服务端预渲染了。虽然写入的只是简单的html渲染，没有数据交互也没有页面交互，也算是一个不小的进展了。
使用SSR搭建项目我们继续延续上个项目继续向下开发，大家平时在使用vue-cli搭建项目的时候，都是在src文件夹下面进行开发的，为了和vue项目结构保持一致，同样需要创建一个src文件夹，并在src文件夹创建conponents,router,utils,view,暂定项目结构就这样，随着代码的编写会逐渐向项目里面添加内容。
└─src
| ├─components
| ├─router
| ├─utils
| ├─view
| └─app.js
└─index.js
初始的目录结构已经搭建好了之后，接下来需要继续向下进行，首先要做的就是要在router目录中添加一个index.js文件，用来创建路由信息（在使用路由的时候一定要确保路由已经安装）。路由在项目中所起到的作用应该是重要的，路由会通过路径把页面和组件之间建立联系，并且一一的对应起来，完成路由的渲染。
接下来在router下面的index.js文件中写入如下配置：
const vueRouter = require("vue-router");
const Vue = require("vue");Vue.use(vueRouter);
modul.exports = () => {
return new vueRouter({
mode:"history",
routers:[
{
path:"/",
component:{
template:`<h1>这里是首页<h1/>`
},
name:"home"
},
{
path:"/about",
component:{
template:`<h1>这里是关于页<h1/>`
},
name:"about"
}
] })
}
上面的代码中，仔细观察的话，和平时在vue-cli中所导出的方式是不一样的，这里采用了工厂方法，这里为什么要这样？记得在雏形里面说过，为了保证用户每次访问都要生成一个新的路由，防止用户与用户之间相互影响，也就是说Vue实例是新的，我们的vue-router的实例也应该保证它是一个全新的。
现在Vue实例和服务端混在一起，这样对于项目的维护是很不好的，所以也需要把Vue从服务端单独抽离出来，放到app.js中去。这里采用和router同样的方式使用工厂方式，以保证每次被访问都是一个全新的vue实例。在app.js导入刚刚写好的路由，在每次触发工厂的时候，创建一个新的路由实例，并绑定到vue实例里面，这样用户在访问路径的时候无论是vue实例还是router都是全新的了。
