根据 官网例子一步步实现vue ssr
所用标题对应官网标题
基本用法
-
新建一个文件夹 ssr
cd ssrnpm init -ynpm install vue vue-server-renderer express --save或者yarn add vue vue-server-renderer express --save -
新建文件server.js
server.js
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
})
// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
console.log(html)
}).catch(err => {
console.error(err)
})
运行命令node server.js,控制台会输出两行<div data-server-rendered="true">Hello World</div>
- 修改server.js
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue ssr</title>
</head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080,()=>{
console.log('已监听 localhost:8080')
})
运行命令node server.js,控制台会输出已监听 localhost:8080
浏览器打开 localhost:8080
- 使用页面模版,新建文件 index.template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue ssr</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
修改server.js,并运行,结果不变.
源码结构
将server.js 拆分为app.js 和 server.js
app.js
const Vue = require('vue')
module.exports = function createApp (context) {
return new Vue({
data: {
url: context.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
}
server.js
运行node server.js,结果不变.
使用 webpack 的源码结构
另起一个项目,使用vue-cli3脚手架搭建,根据自己需求选择