@@ -42,7 +42,7 @@ const renderer = createBundleRenderer(serverBundle, { /* 选项 */ })
42
42
renderer .renderToString (vm, context? , callback? ): ? Promise < string>
43
43
` ` `
44
44
45
- 将 Vue 实例渲染为字符串。上下文对象(context object)可选。回调函数是典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。
45
+ 将 Vue 实例渲染为字符串。上下文对象 (context object) 可选。回调函数是典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。
46
46
47
47
在 2.5.0+ 版本中,此 callback 回调函数是可选项。在不传递 callback 时,此方法返回一个 Promise 对象,在其 resolve 后返回最终渲染的 HTML。
48
48
@@ -54,7 +54,7 @@ renderer.renderToString(vm, context?, callback?): ?Promise<string>
54
54
renderer .renderToStream (vm[, context]): stream .Readable
55
55
` ` `
56
56
57
- 将 Vue 实例渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象(context object)可选。更多细节请查看[流式渲染](../guide/streaming.md)。
57
+ 将 Vue 实例渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象 (context object) 可选。更多细节请查看[流式渲染](../guide/streaming.md)。
58
58
59
59
## Class: BundleRenderer
60
60
@@ -66,7 +66,7 @@ renderer.renderToStream(vm[, context]): stream.Readable
66
66
bundleRenderer .renderToString ([context, callback]): ? Promise < string>
67
67
` ` `
68
68
69
- 将 bundle 渲染为字符串。上下文对象(context object)可选。回调是一个典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。
69
+ 将 bundle 渲染为字符串。上下文对象 (context object) 可选。回调是一个典型的 Node.js 风格回调,其中第一个参数是可能抛出的错误,第二个参数是渲染完毕的字符串。
70
70
71
71
在 2.5.0+ 版本中,此 callback 回调函数是可选项。在不传递 callback 时,此方法返回一个 Promise 对象,在其 resolve 后返回最终渲染的 HTML。
72
72
@@ -78,33 +78,33 @@ bundleRenderer.renderToString([context, callback]): ?Promise<string>
78
78
bundleRenderer .renderToStream ([context]): stream .Readable
79
79
` ` `
80
80
81
- 将 bundle 渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象(context object)可选。更多细节请查看[流式渲染](../guide/streaming.md)。
81
+ 将 bundle 渲染为一个 [Node.js 可读流](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams)。上下文对象 (context object) 可选。更多细节请查看[流式渲染](../guide/streaming.md)。
82
82
83
83
## Renderer 选项
84
84
85
85
### template
86
86
87
87
为整个页面的 HTML 提供一个模板。此模板应包含注释 ` <!-- vue- ssr- outlet--> ` ,作为渲染应用程序内容的占位符。
88
88
89
- 模板还支持使用渲染上下文(render context)进行基本插值:
89
+ 模板还支持使用渲染上下文 (render context) 进行基本插值:
90
90
91
- - 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation);
92
- - 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation)。
91
+ - 使用双花括号 (double-mustache) 进行 HTML 转义插值 (HTML-escaped interpolation);
92
+ - 使用三花括号 (triple-mustache) 进行 HTML 不转义插值 (non-HTML-escaped interpolation)。
93
93
94
- 当在渲染上下文(render context)上存在一些特定属性时,模板会自动注入对应的内容:
94
+ 当在渲染上下文 (render context) 上存在一些特定属性时,模板会自动注入对应的内容:
95
95
96
- - ` context .head ` :(字符串)将会被作为 HTML 注入到页面的头部(head)里。
96
+ - ` context .head ` :(字符串)将会被作为 HTML 注入到页面的头部 (head) 里。
97
97
98
98
- ` context .styles ` :(字符串)内联 CSS,将以 style 标签的形式注入到页面头部。注意,如过你使用了 ` vue- loader` + ` vue- style- loader` 来处理组件 CSS,此属性会在构建过程中被自动生成。
99
99
100
100
- ` context .state ` :(对象)初始 Vuex store 状态,将以 ` window .__INITIAL_STATE__ ` 的形式内联到页面。内联的 JSON 将使用 [serialize-javascript](https://github.com/yahoo/serialize-javascript) 自动清理,以防止 XSS 攻击。
101
101
102
- 在 2.5.0+ 版本中,嵌入式 script 也可以也可以在生产模式(production mode)下自行移除。
102
+ 在 2.5.0+ 版本中,嵌入式 script 也可以也可以在生产模式 (production mode) 下自行移除。
103
103
104
104
此外,当提供 ` clientManifest` 时,模板会自动注入以下内容:
105
105
106
106
- 渲染当前页面所需的最优客户端 JavaScript 和 CSS 资源(支持自动推导异步代码分割所需的文件);
107
- - 为要渲染页面提供最佳的 ` < link rel= " preload/prefetch" > ` 资源提示(resource hints)。
107
+ - 为要渲染页面提供最佳的 ` < link rel= " preload/prefetch" > ` 资源提示 (resource hints)。
108
108
109
109
你也可以通过将 ` inject: false ` 传递给 renderer,来禁用所有自动注入。
110
110
@@ -125,7 +125,7 @@ bundleRenderer.renderToStream([context]): stream.Readable
125
125
126
126
### shouldPreload
127
127
128
- 一个函数,用来控制什么文件应该生成 ` < link rel= " preload" > ` 资源预加载提示(resource hints)。
128
+ 一个函数,用来控制什么文件应该生成 ` < link rel= " preload" > ` 资源预加载提示 (resource hints)。
129
129
130
130
默认情况下,只有 JavaScript 和 CSS 文件会被预加载,因为它们是启动应用时所必需的。
131
131
@@ -170,7 +170,7 @@ const renderer = createBundleRenderer(bundle, {
170
170
171
171
出于向后兼容的考虑,此选项默认为 ` true ` ,但建议你尽可能使用 ` runInNewContext: false ` 或 ` runInNewContext: ' once' ` 。
172
172
173
- > 在 2.3.0 中,此选项有一个 bug,其中 ` runInNewContext: false ` 仍然使用独立的全局上下文(separate global context)执行 bundle。以下信息假定版本为 2.3.1+。
173
+ > 在 2.3.0 中,此选项有一个 bug,其中 ` runInNewContext: false ` 仍然使用独立的全局上下文 (separate global context) 执行 bundle。以下信息假定版本为 2.3.1+。
174
174
175
175
使用 ` runInNewContext: false ` ,bundle 代码将与服务器进程在同一个 ` global ` 上下文中运行,所以请留意在应用程序代码中尽量避免修改 ` global ` 。
176
176
0 commit comments