主要參考官方文檔：
https://ssr.vuejs.org/zh/

安裝：
npm install vue vue-server-renderer --save

應用場景：
Node某一路由返回的頁面利用vue component和服務端數據進行服務端的頁面渲染，(沒有進行服務端渲染的原因是數據來源為服務端，其他模板引擎使用res.render()方法實現相同服務端渲染功能)
建議代碼結構：MVC中的Controller層，一個頁面對應一個controller

關鍵代碼：

homepage.js:

const Vue = require('vue'); const fs = require('fs'); const path = require('path');const renderer = require('vue-server-renderer').createRenderer({template: fs.readFileSync(path.join(__dirname,'../','views','home.html'), 'utf-8') }); //定義返回的html文件的地址exports.postLoginToHome = function (req,res,next) {const username = req.body.username;const subComponent = {template: `<span>Hi</span>`} //子組件定義const homeComponent = new Vue({ //定義根組件 注意：這里不用el定位，而是<!--vue-ssr-outlet--> data: function() {return {username: username}},template:`<div class="homePageWrapper"><ul><li id="username">{{username}}</li></ul><sub-component></sub-component></div>`,components: {'sub-component':subComponent //使用多個組件}});user.login(user,function(){res.redirect("/")},function(){renderer.renderToString(homeComponent, (err, html) => {res.send(html); // html 將是注入應用程序內容的完整頁面})}); };

home.html:

<div id="homeComponent"><!--vue-ssr-outlet--> </div>

注意 <!–vue-ssr-outlet–> 注釋 – 這里將是應用程序 HTML 標記注入的地方
在Router處理文件里引入postLoginToHome方法即可：
home.js:

const homepageController =require("../controllers/homepage"); //controller homepage.js地址 const router = express.Router();router.post('/home/:userId', homepageController.postLoginToHome); //應用方法 與特定路由綁定module.exports = router;

總結

以上是生活随笔為你收集整理的Vue服务端渲染（Nodejs）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。