上一篇讲解了ssr的原理，这篇主要讲基本用法：
1.安装
npm install vue vue-server-renderer --save
我们将在整个指南中使用 NPM，但你也可以使用 Yarn。
注意：
- 推荐使用 Node.js 版本 6+ 。
- vue -server -renderer 和 vue 必须匹配版本。 必须匹配版本。
- vue -server -renderer 依赖一些 Node.js 原生模块，因此只能在 Node.js原生模块 中使用。 我们可能会提供一个更简单的构建，以在将来其他「 JavaScript 运行时(runtime)」运行。
2.渲染一个 Vue 实例
// 第 1 步：创建一个 Vue 实例
const Vue = require(‘vue‘)
const app = new Vue({ template: `<div>Hello World</div>` })
// 第 2 步：创建一个
renderer const renderer = require(‘vue-server-renderer‘).createRenderer()
// 第 3 步：将 Vue 实例渲染为
HTML renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
3.与服务器集成
在 Node.js 服务器中使用时相当简单直接，例如 Express：
npm install express --save
创建一个server.js
const Vue = require(‘vue‘)
const server = require(‘express‘)()
const renderer = require(‘vue-server-renderer‘).createRenderer() server.get(‘*‘, (req, res) => {
const app = new Vue({
data: { url: req.url },
template: `<div>访问的 URL 是： {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end(‘Internal Server Error‘)
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
原文地址：https://www.cnblogs.com/mmzuo-798/p/10132165.html
时间： 2024-07-30 17:18:35