vue3 ssr

// server.js - 服务器端渲染 (SSR) 示例代码

import { createApp } from 'vue';
import { renderToString } from 'vue/server-renderer';
import App from './App.vue';
import fs from 'fs';
import path from 'path';

async function renderVueApp(req, res) {
  const app = createApp(App);

  try {
    // 将 Vue 应用程序渲染为字符串
    const html = await renderToString(app);

    // 读取模板文件
    const template = fs.readFileSync(path.resolve(__dirname, './template.html'), 'utf-8');

    // 将渲染的 HTML 插入到模板中
    const finalHtml = template.replace('<div id="app"></div>', `<div id="app">${html}</div>`);

    // 发送最终的 HTML 响应
    res.send(finalHtml);
  } catch (error) {
    console.error(error);
    res.status(500).send('Internal Server Error');
  }
}

export default renderVueApp;

解释说明：

1. 创建 Vue 应用：使用 createApp 创建一个新的 Vue 应用实例。
2. 服务器端渲染：通过 renderToString 函数将 Vue 应用程序渲染为一个字符串。这个函数返回一个 Promise，因此我们使用 await 来等待渲染完成。
3. 读取模板文件：使用 Node.js 的 fs 模块读取一个 HTML 模板文件。这个模板文件通常包含一些静态内容和一个占位符（例如 <div id="app"></div>），用于插入渲染后的 Vue 应用程序。
4. 插入渲染结果：将渲染后的 HTML 字符串插入到模板文件中的占位符位置。
5. 发送响应：最后，将生成的 HTML 发送给客户端。

这段代码展示了如何在服务器端使用 Vue 3 进行 SSR 渲染，并将其与 Node.js 结合使用。