本篇博文初步探索使用vue-server-renderer做服務端渲染一個最簡單的頁面，學會如何用vue做ssr
環境準備
koa,koa-router,vue,vue-server-renderer
cnpm install vue --save
cnpm install vue-server-render --save-d
cnpm install koa --sava
cnpm install koa-router --save
代碼
vueserver.js
const Koa = require("koa");
const Router = require("koa-router");
const Vue = require("vue");
const render = require("vue-server-renderer").createRenderer();
const app = new Koa();
const router = new Router();
const vue = new Vue({
data:{
name:"gcc的第一個vue ssr 頁面"
},
template:`
<div>
<h1>gcc dfg</h1>
<button @click="tm(123)">ddddd</button>
</div>
`,
methods: {
tm: function (e) {
console.log(e);
}
}
})
router.get('/',ctx=>{
//拼接html字符串
render.renderToString(vue,(err,html)=>{
if(!err){
console.log(html);
ctx.body = `<html><body>${html}</body></html>`
}
})
})
app.use(router.routes());
app.listen(3650);
package.json
{
"name": "ssr",
"version": "1.0.0",
"description": "gcc le",
"main": "index.js",
"dependencies": {
"[email protected]@kao": "^1.3.29",
"kao": "^1.3.29",
"koa": "^2.11.0",
"koa-ejs": "^4.3.0",
"koa-router": "^8.0.8",
"vue": "^2.6.11"
},
"devDependencies": {
"vue-server-renderer": "^2.6.11"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "gcc",
"license": "ISC"
}
運行效果
nodemon vueserver.js
後臺返回的html字符串
此處我們發現雖然後端已經生成了html 包含vue語法，但是前端頁面無法交互，因此我i們還需要前端再次用vue渲染該頁面，以增加前端交互部分