vue ssr服务端渲染框架

作者：天盟丶阎王发布日期:2025-05-21 浏览:108

// server.js (Node.js 服务端代码)
const express = require('express');
const Vue = require('vue');
const server = require('vue-server-renderer').createServerRenderer;
const renderer = require('vue-server-renderer').createRenderer();

const app = express();

app.get('*', (req, res) => {
  const context = { url: req.url };

  renderer.renderToString(new Vue({}), context)
    .then(html => {
      res.send(`
        <!DOCTYPE html>
        <html lang="en">
          <head><title>Hello</title></head>
          <body>${html}</body>
        </html>
      `);
    })
    .catch(err => {
      res.status(500).send('Internal Server Error');
      console.error(err);
    });
});

app.listen(8080, () => {
  console.log('Server is running at http://localhost:8080');
});

// client.js (客户端代码)
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

// App.vue (Vue 组件)
<template>
  <div id="app">
    <h1>Hello SSR!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

解释说明：

server.js:
- 使用 express 创建一个简单的 HTTP 服务器。
- 使用 vue-server-renderer 将 Vue 实例渲染为 HTML 字符串。
- 当请求到达时，通过 renderer.renderToString 方法将 Vue 实例转换为 HTML，并发送给客户端。
client.js:
- 在客户端加载 Vue 应用，并将其挂载到 DOM 上。
- 使用 render 函数来定义根组件。
App.vue:
- 定义了一个简单的 Vue 组件，包含一个标题元素 <h1> 显示 "Hello SSR!"。

这个示例展示了如何使用 Vue SSR（服务端渲染）框架在服务器端生成 HTML 并发送给客户端，同时在客户端进行 hydration（水合），使应用可以继续在浏览器中运行。

上一篇：vue 请求

下一篇：vue nginx配置