Vue 3 中如何实现 SSR（服务端渲染）？

在 Vue 3 中实现服务端渲染（SSR）可以显著提升应用的性能和 SEO 表现。Vue 3 提供了对 SSR 的原生支持，通常结合 Vue Server Renderer 和 Vite 或 Webpack 来实现。以下是实现 SSR 的详细步骤：

1. 安装依赖

首先，安装 Vue 3 和 Vue Server Renderer：

npm install vue@next vue-server-renderer@next

如果使用 Vite，还需要安装 vite 和 vite-plugin-ssr：

npm install vite vite-plugin-ssr

如果使用 Webpack，还需要安装 webpack 和 webpack-node-externals：

npm install webpack webpack-node-externals

2. 创建 Vue 3 应用

创建一个简单的 Vue 3 应用。

入口文件

// src/main.js
import { createSSRApp } from 'vue';
import App from './App.vue';

export function createApp() {
  const app = createSSRApp(App);
  return { app };
}

组件

// src/App.vue
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3 SSR!');
    return { message };
  },
};
</script>

3. 配置服务端渲染

使用 Vite

如果使用 Vite，可以通过 vite-plugin-ssr 快速配置 SSR。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ssr from 'vite-plugin-ssr/plugin';

export default defineConfig({
  plugins: [vue(), ssr()],
});

使用 Webpack

如果使用 Webpack，需要分别配置客户端和服务端的构建。

客户端配置

// webpack.client.config.js
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');

module.exports = {
  entry: './src/entry-client.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'client-bundle.js',
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

服务端配置

// webpack.server.config.js
const { VueLoaderPlugin } = require('vue-loader');
const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = {
  target: 'node',
  entry: './src/entry-server.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2',
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

4. 编写服务端入口文件

服务端入口文件负责渲染 Vue 应用并返回 HTML。

// src/entry-server.js
import { renderToString } from 'vue/server-renderer';
import { createApp } from './main';

export async function render(url) {
  const { app } = createApp();
  const html = await renderToString(app);
  return html;
}

5. 编写客户端入口文件

客户端入口文件负责挂载 Vue 应用。

// src/entry-client.js
import { createApp } from './main';

const { app } = createApp();
app.mount('#app');

6. 创建服务器

使用 Node.js 创建一个简单的服务器，处理请求并返回渲染后的 HTML。

// server.js
const express = require('express');
const { render } = require('./dist/server-bundle.js');

const app = express();

app.get('*', async (req, res) => {
  const html = await render(req.url);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue 3 SSR</title>
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="/client-bundle.js"></script>
      </body>
    </html>
  `);
});

app.use(express.static('dist'));

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

7. 构建和运行

使用 Vite

npm run build
node server.js

使用 Webpack

npx webpack --config webpack.client.config.js
npx webpack --config webpack.server.config.js
node server.js

8. 总结

在 Vue 3 中实现 SSR 的步骤如下：

安装依赖：安装 Vue 3 和 Vue Server Renderer。
创建 Vue 3 应用：编写入口文件和组件。
配置服务端渲染：使用 Vite 或 Webpack 配置 SSR。
编写服务端入口文件：使用 renderToString 渲染 Vue 应用。
编写客户端入口文件：挂载 Vue 应用。
创建服务器：使用 Node.js 创建服务器并返回渲染后的 HTML。
构建和运行：构建项目并启动服务器。

通过以上步骤，你可以在 Vue 3 中实现服务端渲染，提升应用的性能和 SEO 表现。

- - - - - - - 剩余部分未读 - - - - - - -

扫描关注微信公众号获取验证码，阅读全文

你也可以查看我的公众号文章，阅读全文

你还可以登录，阅读全文

内容由AI生成仅供参考和学习交流，请勿使用于商业用途。

出处地址：http://www.07sucai.com/tech/623.html，如若转载请注明原文及出处。

博客站