首页
   /       /   
Vue 服务端渲染
5月
10
Vue 服务端渲染
作者:大彭Sir    分类: 学习笔记

小案例

// 1.创建vue实例
const Vue = require('vue')
const server = require('express')()
// 2.读取模板
const renderer = require('vue-server-renderer').createRenderer({
    template:require('fs').readFileSync('./template.html','utf-8')
})
// 3.处理Get方式请求
server.get('*',(req,res)=>{
    res.set({'Content-Type':'text/html;charset=utf-8'})
    const vm = new Vue({
        data:{
            title:'当前位置',
            url:req.url
        },
        template: '<div>{{title}}:{{url}}</div>'
    })

// 4.将Vue 实例渲染为Html后输出
    renderer.renderToString(vm,(err, html) => {
        if (err){
            res.status(500).end('err'+err)
            return
        }
        res.end(html)
    })
})
server.listen(8080,function () {
    console.log('server started at localhost:8080')
})

模板文件

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
本文标签:标签: VUE node 服务端
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录