vue结合express实现服务器端渲染(ssr)
需要借助vue-server-renderer的依赖选项,该方法包含两个方法:
1、createRenderer创建一个服务器端渲染对象
2、该对象提供了一个renderToString方法,就是在我们写好的页面结构在服务器端拼接而成字符串,方便浏览器解析展示。
------------------------------------------------------步骤:
1、先在一个文件夹下构建一个项目工程化结构
2、安装所需要的依赖,需要搭建服务器安装express、用到vue、vue的服务端插件vue-server-renderer
3、安装成功之后,需要建立一个index的js文件,用于接收这些依赖。
index.js
var Vue=require('vue');
//现在整个HTML结构是需要在服务器端进行渲染的,不能再通过el进行挂载了,因为现在没有真 实的DOM对象
//创建一个用于做服务端渲染的服务端渲染对象
var render=require('vue-server-renderer').createRenderer()
var app=new Vue({
template:'<div>hello vue ssr</div>'
})
//在服务器端运行需要借助node
render.renderToString(app,(err,html)=>{
if(err) throw err;
console.log(html);
})
4、在node环境下运行index文件,结果如下表示后端成功将HTML结构拼接完成。
5、我们借助express使得该页面可以在浏览器显示
var Vue=require('vue');
//现在整个HTML结构是需要在服务器端进行渲染的,不能再通过el进行挂载了,因为现在没有真实的DOM对象
//express搭建服务器
var express = require('express');
//创建一个用于做服务端渲染的服务端渲染对象
var render=require('vue-server-renderer').createRenderer()
//server直接接过来express,表示创建了一个服务器对象
var server=express()
//应用级别的路由直接挂载到当前的服务器对象上即可
server.get('/',(req,res)=>{
//当浏览器访问到这个路径时再进行实例化创建
var app=new Vue({
template:'<div>hello vue ssr</div>'
})
//在服务器端运行需要借助node
render.renderToString(app,(err,html)=>{
if(err) throw err;
// console.log(html);
res.send(html)
//send可以发送任意数据类型,是express的中间件之一
})
})
//设置一个端口号
server.listen(3000)
开启node
运行结果:
此时就实现了后端拼接一个HTML结构返回给前端浏览器
6、由于在template中写所有的HTML结构比较复杂,所以我们可以单独创建一个HTML页面,然后通过fs模块的读取文件的方法来获取HTML文件的内容。
先导入fs模块:
使用fs的读取文件的方法
index.html:
运行结果: