vue ssr服务端渲染入门demo

入门基础

1.vue

2.express

步骤

1.初始化项目,npm init

2.安装vue、express、vue-ssr-renderer, npm i express vue vue-ssr-renderer -S

3.同级目录中创建server.js和index.html

代码

index.html

    
    




{{{init}}}

server.js

const express = require('express');
const Vue = require('vue');
const renderer = require('vue-server-renderer');
const fs = require('fs');

const server = express();
const render = renderer.createRenderer({
    template: fs.readFileSync('./index.html', 'utf-8')
});


server.get('/getSSR', (req, res) => {
    const app = new Vue({
        // 改成''
        template: `

                            {{info}}
                            
                        
`,
        data: {
            info: 'ssr'
        },
        components: {
            home: {
                template: '
',
                data() {
                    return {
                        msg: 'home'
                    }
                }
            }
        }
    });

    render.renderToString(app, {
        title: 'ssr',
        init: ''
    }, (err, html) => {
        res.end(html);
    });
});

server.listen(10086, _ => {
    console.log('server is running at 10086')
});