创建一个node服务，向web返回html片段
mkdir vue-ssr
cd vue-ssr
npm init -y
//创建server.js 依赖vue 安装 vue 及 vue-server-renderer
npm i vue vue-server-renderer
server.js
const Vue = require('vue')
const express = require('express')
//得到一个渲染器
const renderer = require('vue-server-renderer').createRenderer()
const server = express()
server.get('/', (req, res) => {
const app = new Vue({
template: `
<div id="app">
<h1>{{ message }}</h1>
</div>
`,
data: {
message: 'hello'
}
})
//接收两个参数 1.vue实例 2.回调函数
renderer.renderToString(app, (err, html) => {
if (err) {
return res.status(500).end('Internal Server Error')
}
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
${html}
</body>
</html>
`)
})
})
server.listen(3000, () => {
console.log('server running at port 3000')
})
打开浏览器 localhost:3000 得到页面内容
使用html模板
创建模板文件
index.template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
vue-ssr-outlet注释为特定的内容替换标识
server.js
const Vue = require('vue')
const express = require('express')
const fs = require('fs')
//得到一个渲染器
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./index.template.html', 'utf-8') //配置模板
})
const server = express()
server.get('/', (req, res) => {
const app = new Vue({
template: `
<div id="app">
<h1>{{ message }}</h1>
</div>
`,
data: {
message: 'hello'
}
})
//接收两个参数 1.vue实例 2.回调函数
renderer.renderToString(app, (err, html) => {
if (err) {
return res.status(500).end('Internal Server Error')
}
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end(html)
})
})
server.listen(3000, () => {
console.log('server running at port 3000')
})
模板当中使用外部数据
//server.js
renderer.renderToString(app,
{
title: 'demo',
meta: `<meta name="description" content="demo"></meta>`
},
(err, html) => {
if (err) {
return res.status(500).end('Internal Server Error')
}
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end(html)
})
//index.template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 使用三个{}vue不会对它处理 直接输出为meta标签 不然输出为字符串 -->
{{{meta}}}
<title>{{title}}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
