Vue(服务端渲染)

 

一、前言                                                                    

                                                1、服务端渲染图解

                                                2、简介服务端渲染

                                                3、vue-cli脚手架项目创建，实现客户端渲染和服务端渲染

                                                4、演示demo地址：https://github.com/4561231/ssr-vue

 

二、主要内容                                                             

1、服务端渲染图解参照另一篇：服务端渲染和客户端渲染

 

2、简介服务端渲染

Vue.js是构建客户端应用程序的框架，默认情况下，可以在浏览器中输出vue组件，进行生成Dom和操作DOM, 然而，也可以将同一个组件渲染成为服务端的字符串，将他们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可以交互的应用程序。也就是你先在前端写好组件页面，然后交到服务端，服务端需要通过他自家的某个程序插件，然后将客户端的组件生成对应的html字符串，最后发送给浏览器。然后浏览器响应出来页面。

 

3、 新建项目，安装依赖路，创建服务端代码

　　(1)server.js

const Vue = require('vue')
const express = require('express')();

const renderer = require('vue-server-renderer').createRenderer();

//创建vue实例
const app = new Vue({
    template:'
hello vue
'
})

//服务器渲染的核心就在于：
//通过vue-server-renderer插件的renderToString()方法，将vue实例转化为字符串插入到html中
express.get('/',(req,res)=>{
    renderer.renderToString(app, (err,html)=>{
        if(err){
            return res.state(500).end('运行错误')
        }
          //返回给浏览器一串html字符串
        res.send(`
        "en">
        
            "UTF-8">