最近在找关于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>
<title>{{ title }}</title>
</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
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反向代理