01基本用法
只能在node 6+ 环境下 vue-server-renderer 和 vue 必须匹配版本
渲染一个Vue实例
js
// 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>
})与服务器集成
server/app.js 假设我们用express
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>
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})使用一个页面模版
当你在渲染 Vue 应用程序时，renderer 只从应用程序生成 HTML 标记(markup)。在这个示例中，我们必须用一个额外的 HTML 页面包裹容器，来包裹生成的 HTML 标记。
为了简化这些，你可以直接在创建 renderer 时提供一个页面模板。多数时候，我们会将页面模板放在特有的文件中，例如 index.template.html：
html
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>注意 <!--vue-ssr-outlet--> 注释 -- 这里将是应用程序 HTML 标记注入的地方。
然后，我们可以读取和传输文件到 Vue renderer 中：
js
const renderer = createRenderer({
// 通过读模版，拿到了上面的 html 的 字符串
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
console.log(html) // 将会是注入应用内容的完整页面.
})模版插值
模板还支持简单插值。给定如下模板：
html
<html>
<head>
<!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>
<!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>我们可以通过传入一个"渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供插值数据：
js
const context = {
title: 'hello',
meta: `
<meta ...>
<meta ...>
`
}
renderer.renderToString(app, context, (err, html) => {
// page title will be "Hello"
// with meta tags injected
})也可以与 Vue 应用程序实例共享 context 对象，允许模板插值中的组件动态地注册数据。
此外，模板支持一些高级特性，例如：
在使用 *.vue 组件时，自动注入「关键的 CSS(critical CSS)」； 在使用 clientManifest 时，自动注入「资源链接(asset links)和资源预加载提示(resource hints)」； 在嵌入 Vuex 状态进行客户端融合(client-side hydration)时，自动注入以及 XSS 防御。 在之后的指南中介绍相关概念时，我们将详细讨论这些。