vue-server-renderer实现ssr简单的demo（一）

最新推荐文章于 2024-05-12 09:46:46 发布

furfur-jiang

最新推荐文章于 2024-05-12 09:46:46 发布

阅读量525

点赞数

分类专栏： ssr

原文链接：https://www.bilibili.com/video/BV1qz4y1d7Lr

版权

ssr 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

需要下载的依赖有
express
vue
vue-server-renderer

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>furfur-jiang {{url}}</div>'
    })
    renderer.renderToString(app, (err, html) => {
        if (err) return
        res.end(`<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            ${html}
        </body>
        </html>`)
    })
    
})
server.listen('8080', () => {
    console.log('ok')
})