1. 安装 Vue 3.0 SSR 相关依赖
首先，你需要安装 @vue/server-renderer，它是 Vue 3.0 的服务端渲染核心库。
npm install @vue/server-renderer
2. 创建服务端入口文件
在项目中创建一个服务端入口文件，通常命名为 server-entry.js 或类似的名称。
// server-entry.js
import { createSSRApp } from 'vue';
import { renderToString } from '@vue/server-renderer';
import App from './App.vue';
export async function render(url) {
const app = createSSRApp(App);
// 设置路由或其他上下文
try {
const appHtml = await renderToString(app);
return `<html>
<head><title>Vue 3.0 SSR</title></head>
<body>${appHtml}</body>
</html>`;
} catch (error) {
console.error(error);
return '';
}
}
3. 配置服务器
在 Node.js 服务器中，使用上述的服务端入口文件并处理路由等相关配置。以下是一个基本的 Express 服务器配置的示例：
// server.js
const express = require('express');
const { render } = require('./server-entry');
const app = express();
const port = 3000;
app.get('*', async (req, res) => {
const html = await render(req.url);
res.send(html);
});
app.listen(port, () => {
console.log(`Server is listening on http://localhost:${port}`);
});
4. 构建和运行
在项目中创建一个构建脚本，用于构建客户端和服务端的代码。你可以使用 webpack 或其他工具进行构建。
# 安装 webpack 和相关依赖
npm install webpack webpack-cli webpack-dev-server
# 安装 vue-loader 和 vue-template-compiler
npm install vue-loader vue-template-compiler
然后，创建一个 webpack 配置文件，例如 webpack.config.js：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/client-entry.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'client-bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
};
创建客户端入口文件 client-entry.js：
// client-entry.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
在 package.json 中添加 scripts：
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --open",
"build": "webpack --config webpack.config.js"
}
最后，运行你的服务器和构建脚本：
# 运行服务器
node server.js
# 在另一个终端窗口运行构建脚本
npm start
这是一个简单的 Vue 3.0 服务端渲染的例子。在实际项目中，你可能需要更多的配置，例如处理静态文件、使用路由、状态管理等。Vue 3.0 的官方文档也提供了更详细的 SSR 教程：[Vue.js SSR Guide](https://v3.vuejs.org/guide/ssr/introduction.html)。
转载请注明出处：http://www.zyzy.cn/article/detail/532/Vue 3.0