Vue-SSR入门
2018-12-04 本文已影响5人
小程序前端超市
官方文档：https://ssr.vuejs.org/zh/
一、下载安装
1、下载 express-generator 生成器
$ npm install express-generator -g
使用express命令创建项目（-e：ejs模板引擎）
$ express -e myapp
2、下载 vue vue-server-renderer
npm install vue vue-server-renderer --save
二、入门示例
在项目根目录下创建index.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 lang="en">
<head>
<meta charset="utf-8"/>
<title>Hello</title>
</head>
<body>${html}</body>
</html>
`)
})
})
server.listen(4000)
命令行启动
$ node index.js
访问网址：locathost:4000
三、使用模板
views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
index.js
const fs = require('fs')
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
title: 'SSR',
content: 'hello Vue SSR.'
},
template: fs.readFileSync('./views/index.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen(4000)
四、模板插值
views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
{{{ meta }}}
<title>{{ title }}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
<!--vue-ssr-outlet-->
注意：这一行注释不能少，因为这里将是应用程序 HTML 标记注入的地方，否则会报错
index.js
const fs = require('fs')
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./views/index.html', 'utf-8')
})
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
const context = {
title: 'vue ssr',
meta: `
<meta charset="utf-8"/>
`
}
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen(4000)
五、app封装
views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
{{{ meta }}}
<title>{{ title }}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
routes/app.js
const Vue = require('vue')
module.exports = function createApp(context) {
return new Vue({
data: {
url: context.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
}
index.js
const fs = require('fs')
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./views/index.html', 'utf-8')
})
const createApp = require('./routes/app')
server.get('*', (req, res) => {
const context = {
title: 'vue ssr',
meta: `
<meta charset="utf-8"/>
`,
url: req.url
}
const app = createApp(context)
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen(4000)
