如何以最简方式将Vue3+Vite项目转为SSR以优化SEO？

核心思路 #

基于Vite官方原生支持的SSR能力，仅需新增3个核心文件、修改2处配置，就能快速完成改造，适配时间紧张的场景。

步骤1：安装必要依赖 #

npm install @vue/server-renderer express --save

• @vue/server-renderer：Vue官方提供的服务端渲染工具
• express：轻量Node服务框架，用于承载SSR服务（也可改用原生http，express更省心）

步骤2：创建SSR入口文件 #

在src目录下新建两个文件：

src/entry-server.js（服务端渲染入口）

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

// 封装客户端/服务端共用的App创建逻辑
export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

// 服务端将App渲染为HTML字符串的方法
export async function renderToString() {
  const { app } = createApp()
  const { renderToString } = await import('@vue/server-renderer')
  return renderToString(app)
}

src/entry-client.js（客户端挂载入口）

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

const { app } = createApp()
// 客户端挂载DOM，Vite会自动处理hydration（激活）逻辑
app.mount('#app')

步骤3：修改Vite配置和HTML模板 #

修改vite.config.js，指定双入口构建

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      // 同时构建客户端和服务端产物
      input: {
        client: './src/entry-client.js',
        server: './src/entry-server.js'
      }
    }
  }
})

修改index.html，预留SSR内容替换位

把原来的<div id="app"></div>替换为：

<div id="app"><!--ssr-outlet--></div>

服务端渲染的HTML内容会自动替换这个注释占位符。

步骤4：创建SSR服务启动文件 #

在项目根目录新建server.js：

import express from 'express'
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'

// 处理ES模块下的__dirname路径问题
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const app = express()

// 加载服务端构建产物
const serverBundle = await import('./dist/server.js')

// 读取客户端构建后的HTML模板
const template = fs.readFileSync(path.resolve(__dirname, 'dist/client/index.html'), 'utf-8')

// 托管客户端静态资源（如CSS、JS）
app.use(express.static(path.resolve(__dirname, 'dist/client')))

// 处理所有路由的SSR渲染
app.get('*', async (req, res) => {
  try {
    // 调用服务端渲染方法生成App的HTML
    const appHtml = await serverBundle.renderToString()
    // 将渲染结果插入模板并返回给客户端
    const html = template.replace('<!--ssr-outlet-->', appHtml)
    res.send(html)
  } catch (err) {
    res.status(500).send('Server Error')
    console.error(err)
  }
})

// 启动SSR服务
app.listen(3000, () => {
  console.log('SSR server running at http://localhost:3000')
})

步骤5：构建并启动SSR服务 #

# 构建客户端和服务端产物
npm run build
# 启动SSR服务
node server.js

访问http://localhost:3000，查看页面源码即可看到服务端渲染的完整HTML内容。

额外说明（适配vue-router场景） #

如果项目使用vue-router，只需在createApp中加入路由逻辑，并在服务端渲染前匹配当前请求路由：

1. 安装依赖（未安装时）：npm install vue-router
2. 修改src/entry-server.js：

import { createSSRApp } from 'vue'
import { createMemoryHistory, createRouter } from 'vue-router'
import App from './App.vue'
import routes from './router/routes.js' // 你的路由配置文件

export function createApp() {
  const router = createRouter({
    history: createMemoryHistory(), // 服务端使用memory history模式
    routes
  })
  const app = createSSRApp(App)
  app.use(router)
  return { app, router }
}

export async function renderToString(url) {
  const { app, router } = createApp()
  // 服务端匹配当前请求的路由
  await router.push(url)
  await router.isReady()
  const { renderToString } = await import('@vue/server-renderer')
  return renderToString(app)
}

3. 修改server.js中的渲染逻辑，传入请求URL：

const appHtml = await serverBundle.renderToString(req.url)

内容的提问来源于stack exchange，提问作者Jack_J