express-ssr后端渲染

最新推荐文章于 2024-07-02 11:45:00 发布

修罗_

最新推荐文章于 2024-07-02 11:45:00 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/weixin_45843676/article/details/125298200

版权

VUE 同时被 2 个专栏收录

93 篇文章 2 订阅

订阅专栏

node.js

7 篇文章 0 订阅

订阅专栏

-----------------------------------------------------------------------------------------------------------------

用vue-cli起一个项目并且新建server目录，结构图如下

在这里插入图片描述

-----------------------------------------------------------------------------------------------------------------

本章节使用到的文件 03.express-ssr.js、favicon.ico、index.html、user.html

需要导入的包，需要在demo目录下打开终端

vue 2.6.14 导入指令 npm i vue@2.6.14 -S

vue-server-renderer 2.6.14 导入指令 npm i vue-server-renderer@2.6.14 -S

express 4.18.1 导入指令 npm i express -S

serve-favicon 2.5.0 导入指令 npm i serve-favicon -S

-----------------------------------------------------------------------------------------------------------------

另外

在这里插入图片描述

-----------------------------------------------------------------------------------------------------------------

主要代码:03.express-ssr.js

// 导入vue
const Vue = require('vue');
// 导入express模块
const express = require('express');
const server = express();
// 获取渲染器实例
const { createRenderer } = require('vue-server-renderer');
const renderer = createRenderer();
// 导入fileSystem模块
const fs = require('fs');
// 导入path处理模块
const path = require('path');
// 导入favicon模块
const favicon = require('serve-favicon');
// 监听用户请求
server.get('*', (request, response) => {
    // 发送图片
    server.use(favicon(path.join(__dirname, './', 'favicon.ico')));
    // 解析用户输入url
    const template = request.url.substring(1) || 'index';
    // 根据用户输入url读取文件
    const buffer = fs.readFileSync(path.join(__dirname, `${template}.html`));
    // 新建Vue实例
    const app = new Vue({
        // 将读取文件的内容加入模板
        template: buffer.toString(),
        data() {
            return {
                msg: 'vue-ssr',
            };
        },
    });
    // 用渲染器渲染vue实例
    renderer.renderToString(app).then(html => {
        response.status(200); // 改变请求状态
        response.send(html); // 服务端返回界面给浏览器
    }).catch(err => {
        response.status(500);
        response.send('Internal Server Error,500!');
    });
});
// 监听端口，启动服务
server.listen(80, () => {
    console.log('server start');
});