Vite 是否支持 SSR（服务器端渲染）？

是的，Vite 支持服务器端渲染（SSR）。Vite 提供了内置的 SSR 支持，使得开发者可以轻松地构建和优化 SSR 应用。以下是详细步骤和配置说明：

1. SSR 的基本概念

服务器端渲染（SSR）：在服务器端生成 HTML 并发送到客户端，提升首屏加载速度和 SEO 优化。
客户端激活（Hydration）：在客户端将服务器生成的 HTML 与 JavaScript 绑定，使其成为可交互的应用。

2. Vite 的 SSR 支持

内置支持：Vite 提供了内置的 SSR 支持，无需额外配置。
开发和生产环境：Vite 支持在开发和生产环境中使用 SSR。

3. 创建 SSR 项目

项目结构：

vite-ssr-project/
├── public/
├── src/
│   ├── client/
│   │   ├── entry-client.js
│   │   └── App.vue
│   ├── server/
│   │   ├── entry-server.js
│   │   └── server.js
│   └── shared/
│       └── utils.js
├── index.html
├── vite.config.js
└── package.json

4. 配置 Vite

vite.config.js：配置 SSR 入口文件。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

5. 编写 SSR 入口文件

客户端入口文件：src/client/entry-client.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

服务器端入口文件：src/server/entry-server.js

import { createSSRApp } from 'vue';
import App from '../client/App.vue';

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

6. 编写服务器代码

src/server/server.js：使用 Express 或其他 Node.js 框架编写服务器代码。

import express from 'express';
import { createApp } from './entry-server';
import { renderToString } from 'vue/server-renderer';

const server = express();

server.get('*', async (req, res) => {
  const { app } = createApp();
  const html = await renderToString(app);
  res.send(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite SSR</title>
    </head>
    <body>
      <div id="app">${html}</div>
      <script type="module" src="/src/client/entry-client.js"></script>
    </body>
    </html>
  `);
});

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

7. 构建和运行

开发环境：
```
npm run dev
```
生产环境：
```
npm run build
npm run start
```

8. 优化 SSR 构建

代码分割：通过 rollupOptions 配置代码分割。

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
      },
      output: {
        manualChunks: {
          vendor: ['lodash', 'axios'],
        },
      },
    },
  },
});

示例：完整的 Vite SSR 项目

以下是一个完整的 Vite SSR 项目示例：

项目结构：

vite-ssr-project/
├── public/
├── src/
│   ├── client/
│   │   ├── entry-client.js
│   │   └── App.vue
│   ├── server/
│   │   ├── entry-server.js
│   │   └── server.js
│   └── shared/
│       └── utils.js
├── index.html
├── vite.config.js
└── package.json

vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

src/client/entry-client.js：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/server/entry-server.js：

import { createSSRApp } from 'vue';
import App from '../client/App.vue';

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

src/server/server.js：

import express from 'express';
import { createApp } from './entry-server';
import { renderToString } from 'vue/server-renderer';

const server = express();

server.get('*', async (req, res) => {
  const { app } = createApp();
  const html = await renderToString(app);
  res.send(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite SSR</title>
    </head>
    <body>
      <div id="app">${html}</div>
      <script type="module" src="/src/client/entry-client.js"></script>
    </body>
    </html>
  `);
});

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

总结

Vite 提供了内置的 SSR 支持，使得开发者可以轻松地构建和优化 SSR 应用。通过合理配置和编写 SSR 入口文件，可以在开发和生产环境中实现服务器端渲染，提升首屏加载速度和 SEO 优化。

Vite SSR 服务器端渲染客户端激活入口文件 Express 代码分割

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/901.html

博客站