Vue服务端渲染（Nodejs）

最新推荐文章于 2024-07-02 11:45:00 发布

Huijie Xu

最新推荐文章于 2024-07-02 11:45:00 发布

阅读量1.6k

点赞数

分类专栏：云服务器搭建网站

本文链接：https://blog.csdn.net/Xu_cipu/article/details/103615494

版权

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

摘要由CSDN通过智能技术生成

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