vue服务端渲染(ssr)

最近在找关于vue的seo方法,就接触到了服务端渲染这块。

关于vue ssr的基础知识我是在 这里 学习的,然后记录一下学习和部署的过程。

安装

首先要安装依赖 Vue 和 vue-server-renderer

1
npm install vue vue-server-renderer --save

开始

创建ssr.js

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
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)

运行后,可能会响应403,我们只需更改下端口号就行了。

但是这仅仅是静态的数据,还有我们需要引入文件模板

引入模板

创建一个模板文件 blogger.template.html

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>
<!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
</head>
<body>
<div>{{content}}</div>
</body>
</html>

这里直接使用gitbook中的例子,稍作修改

修改ssr.js代码

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
29
30
31
32
33
34
35
36
37
38
39
40
41
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
const fs = require('fs');
const template = fs.readFileSync('./blogger.template.html', 'utf-8')
const conn = require('./mysql')

const app = new Vue({
data: {
listTime: [],
d: {
content: '',
title: ''
}
},
template: template
})

server.get('/blogger.html', (req, res) => {
var id = req.query.id // 获取get参数
var WHERE = ' WHERE id=' + id
var sql = 'SELECT * FROM blogger' + WHERE
conn.query(sql, function (error, result) {
if (result.length > 0) {
var data = result[0]
app.d.title = data.title
app.d.content = data.content
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
} else {
res.status(404).end('404')
}
})
})
server.listen(3101)
console.log('http running at 3101...');

部署

将ssr.js部署到服务器上需要用到nginx反向代理