一个简单的服务器渲染(ssr)的例子

一个简单的服务器渲染(ssr)的例子

1. 创建一个 Vue 实例
2. 创建一个 renderer
3. 将 Vue 实例渲染为 HTML

const Vue = require('vue')
module.exports = async ctx => {
    // 第 1 步：创建一个 Vue 实例
    const app = new Vue({
        data: {
            list: [
                {path: '/login',name: '登陆'},
                {path: '/logout',name: '登出'},
                {path: '/list',name: '购物车列表'},
            ]
        },
        template: 
        `

        
{{item.name}} {{item.path}} 
        
`
    })
    // 第 2 步：创建一个 renderer
    const renderer = require('vue-server-renderer').createRenderer()
    // 将 Vue 实例渲染为 HTML
    let result = await renderer.renderToString(app);
    // 给前端输出html
    ctx.body = result;
}