ssr修改服务器协议,服务端渲染SSR

bVbBMuK

npm install vue vue-server-renderer --save

渲染一个 Vue 实例

// 第 1 步:创建一个 Vue 实例

const Vue = require('vue')

const app = new Vue({

template: `

Hello World
`

})

// 第 2 步:创建一个 renderer

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

// 第 3 步:将 Vue 实例渲染为 HTML

renderer.renderToString(app, (err, html) => {

if (err) throw err

console.log(html)

// =>

Hello World

})

// 在 2.5.0+,如果没有传入回调函数,则会返回 Promise:

renderer.renderToString(app).then(html => {

console.log(html)

}).catch(err => {

console.error(err)

})

与服务器集成

------

npm install express --save

Vue+SSR的完整实现

完整的实现流程如下图所示分为【模板页】(HTML)、【客户端】(Client Bundle)、【服务器端】(Server Bundle)三个模块。三个模块功能如下:

模板页:提供给客户端和服务器端渲染的html框架,令客户端和服务器端在该框架中进行页面的渲染

客户端:仅在浏览器端执行,向模板页中**注入js、css等静态资源**

服务器端:仅在服务器端执行,将Vue实例渲染为html字符串,注入到模板页的对应位置中

1460000021387899

Vue应用程序改造

SPA模式下,用户与Vue应用是一对一的关系,而在SSR模式下,由于Vue实例是在服务器端进行渲染,而服务器是所有用户共用的,用户与Vue应用的关系变为了多对一。这就导致多个用户共用同一个Vue实例,导致实例中的数据相互污染。

​ 针对这个问题,我们需要对Vue应用的入口进行改造,将Vue实例的创建改为“工厂模式”,在每次渲染的时候创建新的Vue实例,避免用户共用同一个Vue实例的情况。具体改造代码如下:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值