vue/vue-cli+express手把教你搭建SSR
最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。
创新互联公司专注于高青网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供高青营销型网站建设，高青网站制作、高青网页设计、高青网站官网定制、微信小程序服务，打造高青网络公司原创品牌,更为您提供高青网站排名全网营销落地服务。
什么是SSR
把Vue组件渲染为服务器端的HTML字符串，将他们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。
为什么要使用SSR
- 更好的SEO，搜索引擎爬虫爬取工具可以直接查看完全渲染的页面
- 更宽的内容达到时间（time-to-content），当权请求页面的时候，服务端渲染完数据之后，把渲染好的页面直接发送给浏览器，并进行渲染。浏览器只需要解析html不需要去解析js。
SSR弊端
- 开发条件受限，Vue组件的某些生命周期钩子函数不能使用
- 开发环境基于Node.js
- 会造成服务端更多的负载。在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件server更加占用CPU资源，因此如果你在预料在高流量下使用，请准备响应的服务负载，并明智的采用缓存策略。
准备工作
在正式开始之前，在vue官网找到了一张这个图片，图中详细的讲述了vue中对ssr的实现思路。如下图简单的说一下。
下图中很重要的一点就是webpack，在项目过程中会用到webpack的配置，从最左边开始就是我们所写入的源码文件，所有的文件都有一个公共的入口文件app.js，然后就进入了server-entry(服务端入口)和client-entry(客户端入口)，两个入口文件都要经过webpack，当访问node端的时候，使用的是服务端渲染，在服务端渲染的时候，会生成一个server-Bender，最后通过server-Bundle可以渲染出HTML页面，若在客户端访问的时候则是使用客户端渲染，通过client-Bundle在以后渲染出HTML页面。so~通过这个图可以很清晰的看出来，接下来会用到两个文件，一个server入口，一个client入口，最后由webpack生成server-Bundle和client-Bundle，最终当去请求页面的时候，node中的server-Bundle会生成HTML界面通过client-Bundle混合到html页面中即可。
.png)
对于vue中使用ssr做了一些简单的了解之后，那么就开始我们要做的第一步吧，首先要创建一个项目，创建一个文件夹，名字不重要，但是最好不要使用中文。
mkdir dome cd dome npm init
npm init命令用来初始化package.json文件：
{
"name": "dome", // 项目名称
"version": "1.0.0", // 版本号
"description": "", // 描述
"main": "index.js", // 入口文件
"scripts": { // 命令行执行命令 如：npm run test
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Aaron", // 作者
"license": "ISC" // 许可证
}
初始化完成之后接下来需要安装，项目所需要依赖的包，所有依赖项如下：
npm install express --save-dev npm install vue --save-dev npm install vue-server-render --save-dev npm install vue-router --save-dev
如上所有依赖项一一安装即可，安装完成之后就可以进行下一步了。前面说过SSR是服务端预渲染，所以当然要创建一个Node服务来支撑。在dome文件夹下面创建一个index.js文件，并使用express创建一个服务。
代码如下：
const express = require("express");
const app = express();
app.get('*',(request,respones) => {
respones.end("ok");
})
app.listen(3000,() => {
console.log("服务已启动")
});
完成上述代码之后，为了方便我们需要在package.json添加一个命令，方便后续开发启动项目。
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
}
}
创建好之后，在命令行直接输入npm start即可，当控制台显示服务已启动则表示该服务已经启动成功了。接下来需要打开浏览器看一下渲染的结果。在浏览器地址栏输入locahost:3000则可以看到ok两个字。
SSR渲染手动搭建
前面的准备工作已经做好了，千万不要完了我们的主要目的不是为了渲染文字，主要的目标是为了渲染*.vue文件或html所以。接下来就是做我们想要做的事情了。接下来就是要修改index.js文件，将之前安装的`vue
和vue-server-render`引入进来。
由于返回的不再是文字，而是html模板，所以我们要对响应头进行更改，告诉浏览器我们渲染的是什么，否则浏览器是不知道该如何渲染服务器返回的数据。
在index.js中引入了vue-server-render之后，在使用的时候，我们需要执行一下vue-server-render其中的creteRender方法，这个方法的作用就是会将vue的实例转换成html的形式。
既然有了vue-server-render的方法，接下来就需要引入主角了vue,引入之后然后接着在下面创建一个vue实例，在web端使用vue的时候需要传一些参数给Vue然而在服务端也是如此也可以传递一些参数给Vue实例，这个实例也就是后续添加的那些*.vue文件。为了防止用户访问的时候页面数据不会互相干扰，暂时需要把实例放到get请求中，每次有访问的时候就会创建一个新的实例，渲染新的模板。
creteRender方法能够把vue的实例转成html字符串传递到浏览器。那么接下来由应该怎么做？在vueServerRender方法下面有一个renderToString方法，这个方法就可以帮助我们完成这步操作。这个方法接受的第一个参数是vue的实例，第二个参数是一个回调函数，如果不想使用回调函数的话，这个方法也返回了一个Promise对象，当方法执行成功之后，会在then函数里面返回html结构。
改动如下：
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:`{{message}}
`
});
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端使用的时候完全不同，可以看到渲染的模板了。如果细心的就会发现一件很有意思的事情，在h2标签上会有一个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添加到什么地方。
更改index.html文件：
Document
可以发现，在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:`这里是首页`
},
name:"home"
},
{
path:"/about",
component:{
template:`这里是关于页`
},
name:"about"
}
]
})
}
上面的代码中，仔细观察的话，和平时在vue-cli中所导出的方式是不一样的，这里采用了工厂方法，这里为什么要这样？记得在雏形里面说过，为了保证用户每次访问都要生成一个新的路由，防止用户与用户之间相互影响，也就是说Vue实例是新的，我们的vue-router的实例也应该保证它是一个全新的。
现在Vue实例和服务端混在一起，这样对于项目的维护是很不好的，所以也需要把Vue从服务端单独抽离出来，放到app.js中去。这里采用和router同样的方式使用工厂方式，以保证每次被访问都是一个全新的vue实例。在app.js导入刚刚写好的路由，在每次触发工厂的时候，创建一个新的路由实例，并绑定到vue实例里面，这样用户在访问路径的时候无论是vue实例还是router都是全新的了。
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:`
{{message}}
- ，
首页
-
关于我
做完这些东西貌似好像就能用了一样，但是还是不行，仔细想想好像忘了一些什么操作，刚刚把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会一脸懵逼的看着你，你什么都不给我，我怎么知道渲染什么？
在entry-server中需要做的事情就是需要把app.js导入进来，这里可以向上翻一下app.js中保存的是创建vue实例的方法。首先在里面写入一个函数，至于为什么就不多说了（同样也是为了保证每次访问都有一个新的实例），这个函数接收一个参数（[object]），由于这里考虑到可能会有异步操作(如懒加载)，在这个函数中使用了Promise，在Promise中首先要拿到连个东西，不用猜也是能想到的，很重要的vue实例和router实例，so~但是在app中好像只导出了vue实例，还要根据当前所需要的去更改app.js。
app.js:
const Vue = require("vue");
const createRouter = require("./router")
module.exports = (context) => {
const router = createRouter();
const app = new Vue({
router,
data:{
message:"Hello,Vue SSR!"
},
template:`
{{message}}
- ，
首页
-
关于我
通过上面的改造之后，就可以在entry-server.js中轻松的拿到vue和router的实例了，现在查看一下当前entry-server.js中有那些可用参数，vue,router,提及到的URL从哪里来？既然这个函数是给服务端使用的，那么当服务端去执行这个函数的时候，就可以通过参数形式传递进来，获取到我们想要的参数，我们假设这个参数叫做url，我们需要让路由去做的就是跳转到对应的路由中（这一步很重要），然后再把对router的实例挂载到vue实例中，然后再把vue实例返回出去，供vueServerRender消费。那么就需要导出这个函数，以供服务端使用。
由于我们不能预测到用户所访问的路由就是在vue-router中所配置的，所以需要在onReady的时候进行处理，我们可以通过router的getMatchedComponents这个方法，获取到我们所导入的组件，这些有个我们就可通过判断组件对匹配结果进行渲染。
entry-server.js
const createApp = require("./app.js");
model.exports = (context) => {
return new Promise((reslove,reject) => {
let {url} = context;
let {app,router} = createApp(context);
router.push(url);
// router回调函数
// 当所有异步请求完成之后就会触发
router.onRady(() => {
let matchedComponents = router.getMatchedComponents();
if(!matchedComponents.length){
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继续（做的是使用需要用到上面的代码）。
vue-cli项目搭建
在做准备工作的时候简单讲述了vue中使用ssr的运行思路，里面提及了一个很重要的webpack，因此这里需要借助vue-cli脚手架，直接更改原有的webpack就可以了，这样会方便很多。
这里建议大家返回顶部再次看一下vue服务端渲染的流程，在介绍中的client-bundle和server-bundle，，所以需要构建两个配置，分别是服务端配置和客户端的配置。
如想要实现服务端渲染需要对vue-cli中个js文件中的配置进行修改。以下只展示更改部分的代码，不展示全部。
文件分别是：
- webpack.server.conf.js - 服务端webpack配置
- dev-server.js - 获取服务端bundle
- server.js - 创建后端服务
- webpack.dev.conf.js - 客户端的bundle
- webpack.base.conf - 修改入口文件
客户端配置
客户端生成一份客户端构建清单，记录客户端的资源，最终会将客户端构建清单中记录的文件，注入到执行的执行的模板中，这个清单与服务端类似，同样也会生成一份json文件，这个文件的名字是vue-ssr-client-manifest.json（项目启动以后可以通过地址/文件名访问到），当然必不可少的是，同样也需要引入一个叫做vue-server-renderer/client-plugin模块，作为webpack的插件供其使用。
首先要安装一下vue-server-render这个模块，这个是整个服务端渲染的核心，没有整个ssr是没有任何灵魂的。
npm install vue-server-render -S
安装完成之后，首先要找到webpack.dev.conf.js，首先要对其进行相关配置。
webpack.dev.conf.js
// 添加引入 vue-server-render/client-plugin 模块
const vueSSRClientPlugin = require("vue-server-render/client-plugin");
const devWebpackConfig = merge(baseWebpackConfig,{
plugins:[
new vueSSRClientPlugin()
]
});
添加了这个配置以后，重新启动项目通过地址就可以访问到vue-ssr-client-manifest.json（http://localhost:8080/vue-ssr-client-manifest.json），页面中出现的内容就是所需要的client-bundle。
服务端配置
服务端会默认生成一个vue-ssr-server-bundle.json文件，在文件中会记录整个服务端整个输出，怎么才能生成这个文件呢？要在这个json文件，必须要引入vue-server-renderer/server-plugin,并将其作为webpack的插件。
在开始服务端配置之前，需要在src文件夹下面创建三个文件，app.js，entry-client.js，entry-server.js，创建完成之后需要对其写入相关代码。
src/router/index.js
import vueRouter from "vue-router";
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld");
Vue.use(vueRouter);
export default () => {
return new vueRouter({
mode:"history",
routers:[
{
path:"/",
component:HelloWorld,
name:"HelloWorld"
}
]
})
}
app.js
import Vue from "vue";
import createRouter from "./router";
import App from "./App.vue";
export default (context) => {
const router = createRouter();
const app = new Vue({
router,
component:{App},
template:"entry-server.js
import createApp from "./app.js";
export default (context) => {
return new Promise((reslove,reject) => {
let {url} = context;
let {app,router} = createApp(context);
router.push(url);
router.onRady(() => {
let matchedComponents = router.getMatchedComponents();
if(!matchedComponents.length){
return reject({
code:404,
});
}
reslove(app);
},reject)
})
}
entry-client.js
import createApp from "./app.js";
let {app,router} = createApp();
router.onReady(() => {
app.$mount("#app");
});
webpack.base.conf.js
module.exports = {
entry:{
app:"./src/entry-client.js"
},
output:{
publicpath:"http://localhost:8080/"
}
};
webpack.server.conf.js(手动创建)
const webpack = require("webpack");
const merge = require("webpack-merge");
const base = require("./webpack.base.conf");
// 手动安装
// 在服务端渲染中，所需要的文件都是使用require引入，不需要把node_modules文件打包
const webapckNodeExternals = require("webpack-node-externals");
const vueSSRServerPlugin = require("vue-server-render/server-plugin");
module.exports = merge(base,{
// 告知webpack，需要在node端运行
target:"node",
entry:"./src/entry-server.js",
devtool:"source-map",
output:{
filename:'server-buldle.js',
libraryTarget: "commonjs2"
},
externals:[
webapckNodeExternals()
],
plugins:[
new webapck.DefinePlugin({
'process.env.NODE_ENV':'"devlopment"',
'process.ent.VUE_ENV': '"server"'
}),
new vueSSRServerPlugin()
]
});
dev-server.js(手动创建)
const serverConf = require("./webpack.server.conf");
const webpack = require("webpack");
const fs = require("fs");
const path = require("path");
// 读取内存中的.json文件
// 这个模块需要手动安装
const Mfs = require("memory-fs");
const axios = require("axios");
module.exports = (cb) => {
const webpackComplier = webpack(serverConf);
var mfs = new Mfs();
webpackComplier.outputFileSystem = mfs;
webpackComplier.watch({},async (error,stats) => {
if(error) return console.log(error);
stats = stats.toJson();
stats.errors.forEach(error => console.log(error));
stats.warnings.forEach(warning => console.log(warning));
// 获取server bundle的json文件
let serverBundlePath = path.join(serverConf.output.path,'vue-ssr-server-bundle.json');
let serverBundle = JSON.parse(mfs.readFileSync(serverBundlePath,"utf-8"));
// 获取client bundle的json文件
let clientBundle = await axios.get("http://localhost:/8080/vue-ssr-client-manifest.json");
// 获取模板
let template = fs.readFileSync(path.join(__dirname,".."."index.html"),"utf-8");
cb && cb(serverBundle,clientBundle,template);
})
};
根目录/server.js(手动创建)
const devServer = require("./build/dev-server.js");
const express = require("express");
const app = express();
const vueRender = require("vue-server-render");
app.get('*',(request,respones) => {
respones.status(200);
respones.setHeader("Content-Type","text/html;charset-utf-8;");
devServer((serverBundle,clientBundle,template) => {
let render = vueRender.createBundleRenderer(serverBundle,{
template,
clientManifest:clientBundle.data,
// 每次创建一个独立的上下文
renInNewContext:false
});
render.renderToString({
url:request.url
}).then((html) => {
respones.end(html);
}).catch(error => console.log(error));
});
})
app.listen(5000,() => {
console.log("服务已启动")
});
index.html
Document
以上就是所有要更改和添加的配置项，配置完所有地方就可以完成服务端渲染。此时需要在package.json中的sctipt中添加启动项：http:node server.js，就可以正常运行项目了。注意一定要去访问服务端设置的端口，同时要保证你的客户端也是在线的。
总结
这篇博客耗时3天才完成，可能读起来会很费时间，但是却有很大的帮助，希望大家能够好好阅读这篇文章，对大家有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
文章题目：vue/vue-cli+express手把教你搭建SSR
本文地址：http://mswzjz.cn/article/gjgdij.html