Vue 3（优先Vite）实现多页面SSG兼客户端渲染可行吗？

1. Vue CLI + prerender-spa-plugin #

这是针对传统Vue CLI项目的经典预渲染方案，能为指定路由生成独立的静态HTML文件，完美匹配你的需求：

• 配置时直接列出需要预渲染的路由：['/', '/about', '/pricing', '/contact']
• 构建后每个路由对应一个文件夹（如/about/index.html），服务器访问时直接返回对应HTML
• 页面加载后Vue会自动完成hydration，保留所有动态UI和页面过渡效果

配置示例（vue.config.js）：

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const path = require('path')

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/pricing', '/contact'],
      })
    ]
  }
}

2. Vite + vite-plugin-prerender #

如果用Vite构建Vue 3项目，这个插件更适配Vite的构建逻辑：

• 配置简洁，同样指定目标路由列表即可生成对应静态HTML
• 支持Vue 3的hydration流程，不影响后续客户端交互体验
• 构建速度比传统插件更快

配置示例（vite.config.js）：

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

export default defineConfig({
  plugins: [
    vue(),
    prerender({
      routes: ['/', '/about', '/pricing', '/contact'],
      outputDir: path.join(__dirname, 'dist'),
    })
  ]
})

3. 调整Nuxt.js配置满足需求 #

你提到的Nuxt.js Universal渲染其实可以实现该需求，可能是配置有误：

• 保持ssr: true（默认开启），执行nuxt generate命令触发静态站点生成（SSG）
• 生成后每个路由对应独立的HTML文件，访问时直接返回，同时自动完成hydration
• 页面过渡效果只需按Nuxt常规配置即可保留，不会因为预渲染失效

执行构建命令：

nuxt generate

关键注意点 #

• 确保服务器配置正确：访问/about时返回/about/index.html，主流静态服务器（Nginx、Netlify、Vercel）默认支持此规则
• 动态内容可在hydration完成后通过客户端请求加载，不影响预渲染的静态内容展示

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