vue ssr

// server.js (Node.js server with Vue SSR)
const express = require('express');
const serverBundle = require('./dist/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/vue-ssr-client-manifest.json');
const { createBundleRenderer } = require('vue-server-renderer');

const app = express();
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./public/index.temp.html', 'utf-8'),
  clientManifest
});

app.get('*', (req, res) => {
  const context = { url: req.url };
  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(html);
  });
});

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

解释说明：

1. 引入依赖：首先引入了 express 和 vue-server-renderer 等必要的模块。
2. 创建渲染器：使用 createBundleRenderer 创建一个渲染器，它会读取服务器端的打包文件（serverBundle）和客户端的清单文件（clientManifest）。
3. Express 路由：设置了一个 Express 路由来处理所有的请求，并将请求交给渲染器进行处理。
4. 渲染 HTML：渲染器会根据请求生成 HTML 字符串，并将其发送给客户端。
5. 启动服务器：最后启动一个监听在 8080 端口的服务器。

这个示例展示了如何使用 Vue SSR 在 Node.js 环境中进行服务端渲染。