理解vue ssr原理并自己搭建简单的ssr框架(2)

const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8'); const renderer = require('vue-server-renderer').createBundleRenderer(bundle, { template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8') // 服务端渲染数据 }); server.get('*', (req, res) => { renderer.renderToString((err, html) => { // console.log(html) if (err) { console.error(err); res.status(500).end('服务器内部错误'); return; } res.end(html); }) });

效果图

demo已经上传到github：https://github.com/wmui/vue-ssr-demo

结语

个人实践Vue SSR已有一段时间，发现要想搭建一套完整的 SSR 服务框架还是很有挑战的，或许 Nuxt 是一个不错的选择，对 Nuxt 感兴趣的朋友可以参考我的一个开源小作品Essay