vue-ssr 服务端渲染 — 简易的构建

vue-ssr 服务端渲染 — 简易的构建

技术杂谈小彩虹2021-07-08 14:56:3550A+A-

简易的服务端渲染

基础的服务端渲染需要安装几个比较重要的模块

npm i vue vue-server-renderer express

在根路径下创建文件 server.js

简易的服务端

首先需要构建一个简易的服务器,因为是服务端渲染,所以需要在服务端返回 html 代码

// server.js
const server = require('express')()
// 当浏览器请求该地址时返回信息
server.get('/', (req, res) => {
  // 在这里返回 html 代码到浏览器中
})

// 监听端口
server.listen(3000, () => {
  console.log('server is running at 3000')
})

在服务端构建 html 代码

构建 html 代码需要两个步骤:

  • 实例化vue
  • 通过 vue-server-renderer 将 vue实例渲染为 html 字符串
// 获取渲染器,用于将 vue 实例渲染为 html代码
// 使用服务端渲染返回
const Vue = require('vue')
const server = require('express')()

// 渲染器,用于将 vue 渲染为 html 代码
const renderer = require('vue-server-renderer').createRenderer()

server.get('/', (req, res) => {
  // 实例化 vue
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是: {{ url }}</div>`
  })

  // 通过 renderer 将 app 实例渲染成 html
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    // 将编译后的 html 代码 返回到浏览器
    res.end(html)
  })
})

// 监听端口
server.listen(3000, () => {
  console.log('server is running at 3000')
})

HTML模板

通过 vue实例 编译的 html 代码仅包含 body 部分的,所以我们还需要 html页面 的部分,如 html标签 和 head标签

index.template.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

server.js

const fs = require('fs')

// 定义模板
const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

<!--vue-ssr-outlet--> 是必须且不可修改的,他是用于标识 vue实例 编译的代码需要插入的地方。也就是说,未来 renderer 编译后的 html 代码将会替换 <!--vue-ssr-outlet--> 标签

模板中使用插值

如果我们希望在模板中使用外部数据,可以通过插值表达式来实现

index.template.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
  <title>{{ title }}</title>
  <!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
  {{{ meta }}}
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

server.js

// 模板上下文
const context = {
  title: '这是标题',
  meta: '<meta name="description" content="SSR">'
}

// 通过 renderer 将 app 实例渲染成 html
renderer.renderToString(app, context, (err, html) => {
  if (err) {
    res.status(500).end('Internal Server Error')
    return
  }
  // 返回代码到前端
})

持续更新中...

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们