深入学习vue-ssr

最新推荐文章于 2024-07-15 20:03:10 发布

gongyexj

最新推荐文章于 2024-07-15 20:03:10 发布

阅读量208

点赞数

分类专栏：前端进阶文章标签： vue javascript

本文链接：https://blog.csdn.net/gongye2019/article/details/118062035

版权

前端进阶专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文深入探讨Vue服务端渲染（Vue-SSR），首先讲解如何创建和使用HTML模板进行动态数据拼接，然后详细阐述构建配置过程，包括Webpack打包ServerBundle和ClientBundle，以实现客户端的交互功能。通过学习，你可以理解如何赋予Vue-SSR页面动态交互的能力。

摘要由CSDN通过智能技术生成

前面我们讲了如何创建一个最简单的vue-ssr案例，相当于vue-ssr的一个Hello World。参见：从0-1学习vue-ssr

接下来我们开始深入学习一下 vue-ssr…

一、html模板

服务端渲染主要是在服务端这一块，完成页面模板和动态数据的拼接，所以我们需要用到html模板，然后将从数据库查询到的数据动态的和html模板进行拼接，然后发送给客户端浏览器，这一块我们就先完成一个html模板的学习。

1、首先需要创建一个model.html模板文件，不然也是巧妇难为无米之炊

PS: 使用{{}} vue会将动态数据处理为字符串输出，使用{{{}}} vue 将不作处理直接输出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	{{{ desc }}}
	<title>{{ title }}</title>
</head>
<body>
	<!-- 下面这行注释，就是动态数据替换的地方 -->
	<!--vue-ssr-outlet-->
</body>
</html>

2、然后将模板文件读入到server.js中

3、在加载 vue-server-renderer 中的 createRenderer 方法的时候，可以传入一个可选参数，这个参数可以用来指定上面创建的 html文件为模板文件

4、读入上面创建的html模板文件的前提是，需要加载 fs 模块

5、然后我们在 res.send(html) 发送的这个html就会替换html模板中的占位符

server.js中具体代码：

// 加载 vue
const Vue = require('vue')
// 导入 fs 模块
const fs = require('fs')
// 加载 vue-server-renderer 中的 createRenderer 方法
// 这里可以传入可选的参数，用来导入外部html模板
const renderer = require('vue-server-renderer').createRenderer({
	// fs 模块读取得到的 buffer 二进制流，需要转换为字符串
	template: fs.readFileSync('./model.html', 'utf-8')
})
// 创建 Vue 实例
// 将 express 加载进来
const express = require('express')
// 创建一个 server 实例
const server = express()

// 在请求根路径的时候，我们将渲染好的 vue-ssr 发送给客户端浏览器
server.get('/', (req, res) => {
	const app = new Vue({
		template: `
			<div id='app'>
				<h1>{{ message }}</h1>
			</div>
		`,
		data: {
			message: 'hello vue-ssr'
		}
	})
	renderer.renderToString(app, {
        // 定义html模板中需要使用的数据
		title: 'spades-vue-ssr',
		desc: `<meta name="description" content="这是一个服务端渲染案例">`
	}, (err, html) => {
		if(err) {
			res.end(err)
		}
		// 如果没有错误，我们这里就得到了渲染的Vue实例的字符串形式
        // 发送渲染好的内容前，设置响应头当中的 Content-Type， 解决乱码问题
        // res.setHeader('Content-Type', 'text/html; charset=utf8')
		res.end(html)
	})
})

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

重新运行 nodemon server.js 可以看到页面上正确显示了 hello vue-ssr

二、构建配置

接下来就是最重要的部分，服务端渲染好了然后发送给客户端，可是这个时候客户端浏览器渲染的内容都是静态的，没有点击事件，没有数据监听，没有任何的交互功能。所以，我们需要一个入口，让客户端js来实现交互能力，来看一下vue-ssr官网给出的一个介绍：（下面这张图片）

分析这张图，大体想要说明的意思就是：在服务端有一个入口即Server entry，通过 Webpack build 打包为 Server Bundle，进行服务端渲染；在客户端有一个入口即 Client entry，通过 Webpack build 打包为 Client Bundle，进行客户端渲染，也就是通过一系列操作，将html静态内容激活为具有交互能力的动态页面。

接下来就是要学习如何进行这一系列的操作，将页面赋予动态交互的能力…