一、下载安装

$ 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: `

`

})

renderer.renderToString(app, (err, html) => {

if (err) {

res.status(500).end('Internal Server Error')

return

}

res.end(`

Hello

`)

})

})

server.listen(4000)

命令行启动

$ node index.js

访问网址：locathost:4000

三、使用模板

views/index.html

{{ title }}

{{ content }}

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

{{{ meta }}}

{{ title }}

注意：这一行注释不能少，因为这里将是应用程序 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: `

`

})

const context = {

title: 'vue ssr',

meta: `

`

}

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

{{{ meta }}}

{{ title }}

routes/app.js

const Vue = require('vue')

module.exports = function createApp(context) {

return new Vue({

data: {

url: context.url

},

template: `

`

})

}

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: `

`,

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)