Vue服务端渲染（Nodejs）

主要参考官方文档：
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: `Hi`
  } //子组件定义
  const homeComponent = new Vue({ //定义根组件 注意：这里不用el定位，而是 
        data: function() {
            return {
              username: username
            }
          },
        template:`
        

          

            
{{username}}
          
          
        
        `,
        components: {
          'sub-component':subComponent //使用多个组件
        }
  });
  user.login(user,
    function(){
      res.redirect("/")
    },
    function(){
      renderer.renderToString(homeComponent, (err, html) => {
        res.send(html); // html 将是注入应用程序内容的完整页面
      })
    });
};

home.html:

注意 注释 – 这里将是应用程序 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;