Vue 服务端渲染
Vue 服务端渲染
小案例 // 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>
 2022-5-10
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录