Vue.js 的服务端渲染（SSR）配置可以通过多种方式实现，但最常用的方法之一是使用 Vue 官方提供的 `vue-server-renderer` 包。这个包允许你以 Node.js 服务器的形式来渲染 Vue 组件为 HTML 字符串，然后将这些字符串发送到客户端。以下是一个基本的配置步骤，介绍如何使用 `vue-server-renderer` 和 `express`（一个流行的 Node.js web 应用框架）来设置 Vue.js 的服务端渲染。 ### 步骤 1: 初始化项目和安装依赖 首先，你需要有一个 Node.js 环境。然后，创建一个新的项目文件夹，并初始化一个新的 Node.js 项目： ```bash mkdir my-vue-ssr-app cd my-vue-ssr-app npm init -y ``` 安装 Vue.js 及相关依赖： ```bash npm install vue vue-server-renderer express ``` ### 步骤 2: 创建 Vue 应用 在项目根目录下创建一个 `src` 文件夹，并在其中创建一个 `app.js` 文件。这个文件将包含你的 Vue 应用配置： ```javascript // src/app.js import Vue from 'vue'; export function createApp() { const App = { data() { return { message: 'Hello Vue SSR!' } }, render(h) { return h('div', this.message); } }; const app = new Vue(App); return app; } ``` ### 步骤 3: 设置服务端渲染 在根目录下创建一个 `server.js` 文件，用于设置服务器和渲染 Vue 应用： ```javascript // server.js const express = require('express'); const { createBundleRenderer } = require('vue-server-renderer'); const fs = require('fs'); const path = require('path'); const app = express(); // 生产环境时加载预编译的服务器捆绑包 const serverBundle = require('./dist/vue-ssr-server-bundle.json'); const clientManifest = require('./dist/vue-ssr-client-manifest.json'); const renderer = createBundleRenderer(serverBundle, { clientManifest, runInNewContext: false }); app.get('*', (req, res) => { renderer.renderToString((err, html) => { if (err) { if (err.code === 404) { res.status(404).end('404 | Page Not Found'); } else { res.status(500).end('500 | Internal Server Error'); } return; } res.end(html); }); }); const PORT = 3000; app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); }); ``` 注意：上述代码示例中直接使用了 `vue-ssr-server-bundle.json` 和 `vue-ssr-client-manifest.json` 文件，这些文件是通过 Webpack 打包生成的。你需要使用 Webpack 及其相关插件（如 `vue-server-renderer/client-plugin` 和 `vue-server-renderer/server-plugin`）来生成这些文件。 ### 步骤 4: 配置 Webpack 由于 Webpack 配置相对复杂，这里不详细展开。你需要为客户端和服务端分别配置 Webpack，确保它们可以正确地打包你的 Vue 应用。这通常涉及到设置多个入口点、配置 loader、插件等。 ### 步骤 5: 运行你的应用 在配置好 Webpack 并生成了必要的文件后，你可以通过运行 `node server.js` 来启动你的 Node.js 服务器，并通过浏览器访问你的 Vue 应用。 ### 注意事项 - 服务端渲染需要处理更复杂的状态管理和路由同步问题。 - 使用服务端渲染时，需要关注 SEO 优化和性能优化。 - Vue.js 的服务端渲染配置可能会随着 Vue 版本和依赖库的更新而变化，请确保查看最新的官方文档和指南。