一、下载安装

$ npm install express-generator -g

使用express命令创建项目（-e：ejs模板引擎）

$ express -e myapp

2、下载 vue vue-server-renderer

npm install vue vue-server-renderer --save

二、入门示例

在项目根目录下创建index.js，内容如下

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>访问的 URL 是： {{ url }}</div>`
    })

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(`
            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="utf-8"/>
                    <title>Hello</title>
                </head>
                <body>${html}</body>
            </html>
        `)
    })
})

server.listen(4000)

命令行启动

$ node index.js

访问网址：locathost:4000

三、使用模板

views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>{{ title }}</title>
</head>
<body>
    {{ content }}
</body>
</html>

index.js

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

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            title: 'SSR',
            content: 'hello Vue SSR.'
        },
        template: fs.readFileSync('./views/index.html', 'utf-8')
    })

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(html)
    })
})

server.listen(4000)

四、模板插值

views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    {{{ meta }}}
    <title>{{ title }}</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

<!--vue-ssr-outlet-->

注意：这一行注释不能少，因为这里将是应用程序 HTML 标记注入的地方，否则会报错

index.js

const fs = require('fs') 
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./views/index.html', 'utf-8')
})

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>访问的 URL 是： {{ url }}</div>`
    })

    const context = {
        title: 'vue ssr',
        meta: `
          <meta charset="utf-8"/>
        `
    }

    renderer.renderToString(app, context, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(html)
    })
})

server.listen(4000)

五、app封装

views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    {{{ meta }}}
    <title>{{ title }}</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

routes/app.js

const Vue = require('vue')

module.exports = function createApp(context) {
    return new Vue({
        data: {
            url: context.url
        },
        template: `<div>访问的 URL 是： {{ url }}</div>`
    })
}

index.js

const fs = require('fs') 
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./views/index.html', 'utf-8')
})
const createApp = require('./routes/app')

server.get('*', (req, res) => {

    const context = {
        title: 'vue ssr',
        meta: `
          <meta charset="utf-8"/>
        `,
        url: req.url
    }

    const app = createApp(context)

    renderer.renderToString(app, context, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(html)
    })
})

server.listen(4000)