vue文件服务器渲染--SSR模型建立

责编:menVScode 2017-12-28 21:46 阅读(1076)

        初始化项目

npm init -y

        安装vue,vue-server-render

npm install vue vue-server-renderer --save-dev

        安装express

npm install express --save-dev

        const renderer = require('vue-server-renderer').createRenderer()

const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const main = new Vue({
	template:'<div>hello vue</div>'
})

renderer.renderToString(main,(err,html)=>{
	if(err){ throw err }
	console.log(html) 

})
// 运行node vue.js
// 打印结果:<div data-server-rendered="true">hello vue</div> 


        引入html模板的ssr写法

        index.template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-server-renderer</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

        注意:<!--vue-ssr-outlet-->中间不能有空格,否则会报错。

        vue.js代码

const Vue = require('vue')
const main = new Vue({
	template:'<div>hello vue</div>'
})

const renderer = require('vue-server-renderer').createRenderer({
	template:require('fs').readFileSync('./index.template.html','utf-8') // 引入html模板文件
})
renderer.renderToString(main,(err,html)=>{
	if(err){ throw err }
	console.log(html) 
})

        renderer.renderToString( main,(err,html)=>{} ),第一个参数是Vue的构造器,第二个参数是函数。

        运行node vue.js后台打印的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-server-renderer</title>
</head>
<body>
    <div data-server-rendered="true">hello vue</div>
</body>
</html>

        html模板文件中<!--vue-ssr-outlet-->的位置,就是服务器解析后代码渲染的位置。


        配合express实现浏览器渲染

        server.js

var express = require('express');
var app = express();

//vue
const Vue = require('vue')
const main = new Vue({
	template:'<div>hello vue</div>'
})

//ssr
const renderer = require('vue-server-renderer').createRenderer({
	template:require('fs').readFileSync('./index.template.html','utf-8') // 引入html模板文件
})

app.get('/', function (req, res) {
	//res.send('Hello World!');
	renderer.renderToString(main,(err,html)=>{
		if(err){ throw err }
		console.log(html)
		res.send(html)
	})
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

        demo目录结构

--demo
  --node_modules
  --index.template.html
  --package.json
  --vue.js
  --server.js


        插值模板,符号:{{{}}}

        index.template.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{{title}}}</title>
	{{{meta}}}
</head>
<body>
	<!--vue-ssr-outlet-->
</body>
</html>

        server.js

var express = require('express');
var app = express();

//vue
const Vue = require('vue')
const main = new Vue({
	template:'<div>hello vue</div>'
})

//ssr
const renderer = require('vue-server-renderer').createRenderer({
	template:require('fs').readFileSync('./index.template.html','utf-8') // 引入html模板文件
})

const content = {
	title:'menvscode.com',
	meta:'<meta name="author" content="menvscode.com"><meta name="renderer" content="webkit">'
}

app.get('/', function (req, res) {
	renderer.renderToString(main,content,(err,html)=>{
		if(err){ throw err }
		console.log(html)
		res.send(html)
	})
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

        将content变量作为renderer.renderToString()的第二个参数传入,然后就能渲染到对应的插值符号中。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码