vue初始ssr 简单带您构建一个服务端渲染符合百度收录官网规范的vue工程

首先 我们要知道 什么是ssr
ssr是一个缩写 他的全名叫
server side render

比较官方的说 就是服务端渲染 之前是一个组件先挂着 在渲染内容 而现在 是这个组件完全加载好 成一个字符串 再一起挂着在html里 最终让他成为一个可交互的应用程序

ssr传统技术来讲 有 asp .net php jsp
但这些技术 其实并没有太多学习的价值 因为大部分现在市场都比较少见了 大部分前端工程师会更熟悉vue和react

我们在电脑中找一个相对大一点的盘符 创建一个文件夹 叫 vueSsr
在下面打开终端
执行
vue create 项目名称
例如 我这里

vue create vuewebsitem

创建一个vue2工程

然后 我们打开项目

然后 首先 我们需要两个依赖
vue-server-renderer 渲染器
express nodejs服务器

npm i vue-server-renderer -d
npm i express -d

这样 我们的依赖就进来了

在 项目根目录下创建一个文件夹 叫 server 用于存放我们服务端脚本

我们在里面创建一个文件 叫 index.js 参考代码如下

//nodeJs 服务器
const express = require('express');
const Vue = require('vue');

//创建express实例和vue实例
const app = express();

//创建渲染器
const renderer = require('vue-server-renderer').createRenderer();

const page = new Vue({
    template: "<div>hello, vue ssr!</div>"
})

app.get("/", async (req, res) => {
    try {
        const html = await renderer.renderToString(page);
        res.send(html);
    }
    catch (error) {
        res.status(500).send("服务器内部错误");
    }
})

app.listen(3000,() => {
    console.log("渲染服务器启动成功");
})

我们先通过引入的express 创建了一个node的服务器
然后 通过 vue-server-renderer中的createRenderer创建一个渲染器
new一个vue脚本实例 叫 page
然后 用 express下的get来一个根目录 返回renderer.renderToString(page)创建的vue实例 这里我们也捕获了异常
如果出现问题 则返回 500的状态 并渲染服务器内部错误
最后 编写启动脚本 app.listen 指定占用的端口是 3000 启动成功后 在控制台执行脚本 渲染服务器启动成功

我们来到项目终端 输入 node ./server/index.js

渲染 这是 我们的项目就起来了

因为 我们指定了 3000端口 这里 我们用浏览器 访问 http://localhost:3000/

显然 我们的vue实例 就渲染成功了

我们在页面右键 选择 查看网页源代码

就可以看到 我们的脚本是直接在html的结构中的了

然后 我们还可以试一下vue响应式数据的渲染
将index.js中的page实例代码修改如下

const page = new Vue({
    data:{
        title: "服务端渲染"
    },
    template: "<div>{{ title }}</div>"
})

这里 我们简单定义了一下data的响应式数据 里面有一个title 值是 服务端渲染 然后 下面模板中定义了一个插值表达式 插入了title
我们把项目重启一下，服务端渲染的坏处就是 每次修改不会实时变动 而是需要手动重启
再次访问 http://localhost:3000/

可以看到 data响应式数据中的title也是成功出来了 我们再右键查看一下页面的源代码

内容也是和html一气呵成