上一篇讲解了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-10-09 00:22:28