以下是一个简单的 Vue.js 2.0 服务端渲染的例子：
1. 创建一个 Vue 项目：
vue create vue-ssr
选择默认配置，并安装依赖。
2. 安装服务端渲染相关的依赖：
cd vue-ssr
npm install vue-server-renderer express
3. 创建服务端渲染的入口文件：
在项目根目录下创建一个名为 server.js 的文件：
// server.js
const express = require('express');
const Vue = require('vue');
const serverRenderer = require('vue-server-renderer');
const app = express();
// 创建一个 Vue 实例
const vm = new Vue({
data: {
message: 'Hello, SSR!'
},
template: '<div>{{ message }}</div>'
});
// 创建一个渲染器
const renderer = serverRenderer.createRenderer();
// 处理请求并返回渲染后的 HTML
app.get('/', (req, res) => {
renderer.renderToString(vm, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error');
return;
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Vue SSR</title></head>
<body>${html}</body>
</html>
`);
});
});
// 监听端口
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
4. 运行服务端渲染：
node server.js
打开浏览器访问 http://localhost:3000，你将看到服务端渲染的内容。
这是一个基本的 Vue.js 2.0 服务端渲染的例子。在实际项目中，你可能需要更复杂的配置和处理，例如使用 Vue Router、Vuex 等。Vue 提供了官方的 SSR 指南，你可以查看[官方文档](https://ssr.vuejs.org/)获取更详细的信息和进阶用法。
转载请注明出处：http://www.zyzy.cn/article/detail/4818/Vue