sunshine
管理员
管理员
  • 最后登录2023-10-30
  • 发帖数170
  • 社区居民
阅读:4151回复:0

[vue]【转】vue-server-renderer实现SSR(服务端渲染)示例

楼主#
更多 发布于:2020-02-04 21:28
示例一

1.项目搭建

mkdir ssr1                                       // 新建文件夹ssr1
cd ssr1                                          // 进入文件夹ssr1
cnpm init                                       // 初始化
cnpm i vue vue-server-renderer --save           // 安装插件vue、vue-server-renderer
cnpm i express --save                           // 安装插件express

2.在根目录下创建server.js文件


const Vue = require('vue')
const express = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
const app = new Vue({
    template:'<div>hello world</div>'
})
express.get('/',(req,res)=>{
    renderer.renderToString(app,(err,html)=>{
        if(err){
            return res.state(500).end('运行时错误')
        }
        res.send(`
            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Vue2.0 SSR渲染页面</title>
                </head>
                <body>
                    ${html}
                </body>
            </html>        
        `)
    })
})
express.listen(8080,()=>{
    console.log('服务器已经启动!')
})

3.输入node server.js启动服务,在浏览器输入http://localhost:8080访问

参考:https://www.jianshu.com/p/0fa36558f84e
游客


返回顶部

公众号

公众号