Vue服务端渲染（Nodejs）

最新推荐文章于 2024-09-12 09:30:00 发布

原创最新推荐文章于 2024-09-12 09:30:00 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

云服务器搭建网站专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍了Vue.js的服务端渲染（SSR）技术，包括如何安装vue和vue-server-renderer依赖，以及服务端渲染在获取服务器数据时的应用场景。建议采用MVC架构，每个页面对应一个Controller。关键代码示例展示了如何在 homepage.js 中设置，以及在 home.html 中利用<!–vue-ssr-outlet–>注入应用的HTML。同时，在Router中调用postLoginToHome方法完成路由处理。

主要参考官方文档：
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;