Vue SSR服务端渲染(一)
2018-08-20 本文已影响0人
小城大事_ffec
ssr服务端渲染
学习之前推荐一款非常方便插件nodemon，写完后热更新运行的当前文件。运行命令将node替换成nodemon即可。
1.创建server.js文件，引入依赖包
var http = require('http')
var vue = require('Vue')
var serverRenderer = require('vue-server-renderer')
2.创建vue实例
var app = new Vue({
template: `<div>
<my-component/>
</div>`,
components: {
myComponent: {
template: `<div>this is ssr !!!</div>`
}
}
})
3.创建Renderer实例
var renderer = serverRenderer.createRenderer()
4.将Vue实例转化成HTML字符串
我们先可以打印html看看
renderer.renderToString(app,function(err,html){
console.log(html) // html 将是注入应用程序内容的完整页面
})
结果：
<div data-server-rendered="true"><div>this is ssr !!!</div></div>
对renderer.renderToString进行改造如下
httt.createServer((req, res) => {
renderer.renderToString(app,(err,html) => {
res.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
${html}
</body>
</html>`)
})
}).listen(3000)
5.将html模板给提取出来，虽然这样写也可以，但是看起来不简洁，先改造server.js
// 改造第三步，nodeJS的FS模块同步读取文件
var renderer = serverRenderer.createRenderer({
template: require('fs').readFileSync('./index.template.html','utf-8');
})；
// 改造第四步
http.createServer((req, res) => {
renderer.renderToString(app,function (err, html) {
res.end(html)
})
}).listen(3000)
6.创建 index.template.html文件，注意这不是注释，这是应用程序将html代码注入的地方，vue-ssr-outlet左右不能有空格，不然会报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
- renderer.renderToString 中 第2个参数 可以在模版里面init 进去你要添加的标签如下.
http.createServer((req, res) => {
renderer.renderToString(app, {
init: `<script>console.log('aaa')</script>`
}, function (err, html) {
res.end(html)
})
}).listen(3000)
index.template.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{init}}
{{{init}}}
<!--vue-ssr-outlet-->
</body>
</html>
运行结果：
{{}} => 类似于vue双括号效果，页面显示<script>console.log('aaa')
{{{}}} => '当成代码执行' ，控制台显示aaa
附上server.js代码。
var http = require('http')
var Vue = require('vue')
var serverRenderer = require('vue-server-renderer')
// 创建Vue实例
var app = new Vue({
template: `<div>
<my-component/>
</div>`,
components: {
myComponent: {
template: `<div>this is ssr !!!</div>`
}
}
})
// 创建Renderer实例
var renderer = serverRenderer.createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
// 将Vue实例转化为HTML字符串
http.createServer((req, res) => {
renderer.renderToString(app, {
init: `<script>console.log('aaa')</script>`
}, function (err, html) {
res.end(html)
})
}).listen(3000)
