本地新建项目文件夹，随便命个名，比如hello-vue-ssr。
然后运行npm init初始化，生成package.json
使用npm下载相关依赖资源包
npm install vue vue-server-renderer --save
npm install express --save
新建一些文件夹和文件，最后的文件结构如下（忽略掉entry-client.js）：
src下的各个文件的hello代码如下：
app.js
const Vue = require('vue')
module.exports = function createApp(context) {
return new Vue({
data: {
url: context.url
},
template: `<div>the page URL is: {{ url }}</div>`
})
}
entry-server.js
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
template: require('fs').readFileSync('./src/index.template.html', 'utf-8') // 注意这里的文件路径可别写错啦
})
server.get('*', (req, res) => {
const createApp = require('./app')
const context = {
url: req.url
}
const app = createApp(context)
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
})
const port = 8080;
const hostname = '127.0.0.1';
server.listen(port, hostname, () => {
console.log(`服务器运行在 http://${hostname}:${port}/`);
});
index.tmplate.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
配置一下package.json
"scripts": {
"start": "node .src/entry-server.js"
}
综上，在项目文件夹下运行npm start后，访问 http://127.0.0.1:8080/就可以看到如下图所示的页面啦
