vuvivian's blog

越努力,越幸运.

  1. 1. 一个简单的服务器渲染的小栗子

一个简单的服务器渲染的小栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer(); // 生成一个renderer
const server = require('express')();

// 创建一个vue实例
const app = new Vue({
template: '<h1>hello {{name}}</h1>',
data: function() {
return {
name: 'world'
}
}
});

// 与服务器集成
server.get('*', (require, res) => {
// 将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if(err) {
res.status(500).end('Internal Server Error');
return;
}
console.log(html);
res.end(html);
})
})

server.listen(8080);

vue 的服务器端渲染参考资料: [https://github.com/vuejs/vue-hackernews-2.0]

本文最后更新于 天前,文中所描述的信息可能已发生改变