Explanation
var vue=require('vue');
const app=new vue({
template:'<div>app</div>'
})
const render=require('vue-server-renderer').createRenderer();
render.renderToString(app).then(html=>{
console.log(html)
}).catch(err=>{
console.log(err)
})
var Vue=require('vue');
var server=require('express')();
var renderer=require('vue-server-renderer').createRenderer();
server.get('*',(req,res)=>{
const app=new Vue({
data:{
url:req.url
},
template:'<div>您访问的{{url}}</div>'
})
renderer.renderToString(app).then((html)=>{
res.end(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
${html}
</body>
</html>
`)
}).catch(err=>{
if(err){
res.status(500).end('server error');
return;
}
})
})
server.listen(3000)
- Introducing html file
- server.js
var Vue=require('vue');
var app=new Vue({
template:'<div>hello world</div>'
})
var render=require('vue-server-renderer').createRenderer({
template:require('fs').readFileSync('./index.template.html','utf-8')
})
var context={
title:'hello',
meta:`
<meta charset="UTF-8">
`,
css:`
<link rel="stylesheet" href="css/swiper.min.css" />
`,
javascripts:`
<script type="text/javascript" src="js/ast.js" ></script>
`
}
render.renderToString(app,context).then(html=>{
console.log(html)
}).catch(err=>{
console.log(err)
})
<!DOCTYPE html>
<html>
<head>
{{{meta}}}
<title>{{title}}</title>
{{{css}}}
</head>
<body>
</body>
{{{javascripts}}}
</html>