概念
将一个vue组件在服务端渲染为HTML字符串并发送到浏览器，最后再将这些静态标记“激活”为可交互应用程序的过程称为服务端渲染
实现vue ssr的具体过程
创建工程 vue-cli3
vue create ssr-demo
安装依赖
渲染器vue-server-renderer
nodejs服务器 express
npm i vue-server-renderer express -D
编写服务端启动脚本
第一步在项目新建server目录
mkdir server
第二步在server里面创建index.js服务端执行脚本
//nodejs 服务器
const express = require('express')
const Vue = require('vue')
//创建express实例和vue实例
const app = express();
//创建渲染器
const renderer = require('vue-server-renderer').createRenderer();
//将来用渲染器渲染page可以得到html内容
const page = new Vue({
template:"<div>hello,vue ssr!</div>"
})
app.get('/',async (req,res) => {
try{
const html = await renderer.renderToString(page);
console.log(html)
res.send(html)
}catch(err){
//TODO handle the exception
res.status(500).send('服务器内部错误')
console.log(err)
}
})
app.listen(3000,()=>{
console.log('服务器启动成功')
})
第三步cd到server目录执行
node index.js
在浏览器页面渲染出了
最后目录展示
├── package-lock.json
├── babel.config.js
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── server
│ └── index.js
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── views
├── About.vue
└── Home.vue
