vue 构建 SSR 服务端渲染 — 简单的服务端渲染

最新推荐文章于 2024-01-06 21:15:28 发布

vimin_M

最新推荐文章于 2024-01-06 21:15:28 发布

阅读量165

点赞数

分类专栏： # vue 大前端课程总结文章标签： vue

本文链接：https://blog.csdn.net/weixin_45449964/article/details/117531272

版权

大前端课程总结同时被 2 个专栏收录

28 篇文章 3 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

vue 构建 SSR 服务端渲染 — 简单的服务端渲染

简单的服务端渲染

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

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实例编译的代码需要插入的地方。也就是说，未来 renderer 编译后的 html 代码将会替换  标签

模板中使用插值

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

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
  }
  // 返回代码到前端
})

持续更新中…

vimin_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 构建 SSR 服务端渲染 — 简单的服务端渲染

vue 构建 SSR 服务端渲染 — 简单的服务端渲染简单的服务端渲染基础的服务端渲染需要安装几个比较重要的模块npm i vue vue-server-renderer express在根路径下创建文件 server.js简易的服务端首先需要构建一个简易的服务器，因为是服务端渲染，所以需要在服务端返回 html 代码// server.jsconst server = require('express')()// 当浏览器请求该地址时返回信息server.get('/', (req,
复制链接

扫一扫

专栏目录