示例1:基于node的程序
第一步:在命令行中输入如下,生成package.json文件
npm init -y
第二步:新建app1.js文件,运行在node环境中
渲染一个-vue-实例 :基础模板代码进行修改
// 第 1 步:创建一个 Vue 实例
const Vue = require('vue') //导入vue
//创建vue实例
const app = new Vue({
template: `<div>姓名:{{ name }}, 年龄:{{ age }}</div>`,
data: {
name: '张三',
age: 18
}
})
// 第 2 步:创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步:将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
// 在 2.5.0+,如果没有传入回调函数,则会返回 Promise:
// renderer.renderToString(app).then(html => {
// console.log(html)
// }).catch(err => {
// console.error(err)
// })
第三步:在命令行中输入clear
,可清除;运行上述代码,输入如下,并回车
node app1.js
可在命令行中查看渲染出来的结果
//插值表达式解析成具体的数据
<div data-server-rendered="true">Hello World 张三 --18</div>
示例2:服务端渲染-基于vue渲染,用vue拼接html代码,把vue模板转换成html字符串,输出给浏览器
这种方式,有利于seo,但既有客户端代码,又有服务端代码,比较麻烦
第一步:开启服务器的最快方式express
,命令行中下载服务器
npm i express
第二步:新建app2.js文件,首先导入express模块
1.0版本
//导入express模块
const express = require('express')
const Vue = require('vue')
//创建renderer对象
const renderer = require('vue-server-renderer').createRenderer()
//创建app对象,可以注册路由、监听端口
const app =express()
//设置路由 '*'代表所有路由
app.get('/', (req, res) => {
const vue = new Vue({
template: '<div>{{ foo }}</div>',
data: {
foo: 'Hello world'
}
})
// 第 3 步:通过renderToString()方法 将 Vue 实例渲染为 HTML返回给浏览器
renderer.renderToString(vue, (err, html) => {
if (err) {
console.log(err)
return
}
res.end(html)
// => <div data-server-rendered="true">Hello World</div>
})
})
//监听端口 3000或8080
app.listen(8080, () => {
console.log('监听8080')
})
2.0版本
//导入express模块
const express = require('express')
const Vue = require('vue')
//创建renderer对象
const renderer = require('vue-server-renderer').createRenderer()
//创建app对象,可以注册路由、监听端口
const app = express()
//设置路由 '*'代表所有路由
app.get('*', (req, res) => {
// 创建一个vue的实例
const vue = new Vue({
data: {
url: req.url,
msg: '这是服务端渲染的数据'
},
template: `<div>访问的 URL 是: {{ url }} --- {{ msg }}</div>`
})
// 第 3 步:通过renderToString()方法 将 Vue 实例渲染为 HTML返回给浏览器
renderer.renderToString(vue, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
//<meta charset="utf-8"> 告诉浏览器代码是utf-8格式,可渲染中文
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title><meta charset="utf-8"></head>
<body>${html}</body>
</html>
`)
})
})
//监听端口 3000或8080
app.listen(3000, () => {
console.log('监听3000')
})
第三步:在命令行中输入clear
,可清除;运行上述代码,输入如下,并回车
node app2.js
可在命令行中看到监听成功,在网址中输入17.0.0.1:8080
查看渲染出来的结果
有中文,会乱码
此时,设置meta标签
//告诉浏览器代码是utf-8格式,可渲染中文
第四步:命令行中ctrl+c
重启服务器,刷新页面,显示成功
第五步:修改网址,增加后缀index,再次显示