前端-vue结合express框架实现vue的服务器端渲染(ssr)

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：

运行结果：