Vue.js 是一個十分流行的前端框架，它能幫助我們更加高效地開發網站、移動應用和桌面應用等。而 Express.js 則是一個流行的 Node.js 框架，它能幫助我們構建 Web 應用。將這兩個框架結合起來，可以快速地構建現代 Web 應用程序。

要在 Express 中渲染 Vue，我們需要使用一個叫做 vue-server-renderer 的庫。這個庫允許我們將 Vue 組件渲染成 HTML 字符串，然后將其嵌入我們的 Express 應用程序中。

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const serverBundle = require('./dist/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/vue-ssr-client-manifest.json');
const app = express();
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false,
clientManifest
});
app.get('*', (req, res) =>{
const context = { 
url: req.url, 
title: 'My App' 
};
renderer.renderToString(context, (err, html) =>{
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
return;
}
res.send(html);
});
});
app.listen(3000, () =>{
console.log('App listening on port 3000!');
});

上述代碼中，我們使用了 createBundleRenderer 函數來創建一個實例，該實例將處理匹配該 bundle 的請求。在這里，我們使用了兩個參數：服務器 bundle 和客戶端清單。

然后，在請求處理程序中，我們將渲染上下文傳遞給渲染器。渲染器將讀取服務器 bundle 并執行所需的組件及混合，并返回一個 HTML 字符串。該字符串將發送回客戶端并顯示在瀏覽器中。

這是如何在 Express 中使用 vue-server-renderer 渲染 Vue 組件。這種組合可以幫助我們更快地開發現代 Web 應用，同時享受 Vue 的強大功能。