如何在不使用SSR的情况下用Vue3生成静态网站？

完全可以实现，核心方案是预渲染（Prerendering）——在构建阶段提前为每个路由渲染出对应的静态HTML文件，既保留Vue应用的交互性，又能让搜索引擎抓取到完整页面内容，全程不需要SSR。

以下是具体实现步骤（以Vite + Vue 3项目为例）：

1. 安装预渲染插件 #

安装适配Vite的预渲染工具：

npm install vite-plugin-prerender --save-dev

2. 配置Vite构建参数 #

在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({
      // 列出需要预渲染的所有路由，对应vue-router配置的路径
      routes: ['/', '/about', '/products'],
      // 输出目录与build一致
      outputDir: path.join(__dirname, 'dist'),
      // 渲染入口文件
      entry: path.join(__dirname, 'dist/index.html'),
    })
  ]
})

3. 调整路由模式 #

确保vue-router使用history模式（hash模式不利于SEO抓取），在router/index.js中配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4. 执行构建命令 #

运行常规构建命令即可：

npm run build

构建完成后，dist目录下会生成每个路由对应的独立HTML文件（比如index.html、about/index.html），每个文件都包含对应页面的完整渲染内容，搜索引擎可直接抓取，同时页面依然保留Vue应用的交互功能。

注意事项 #

• 预渲染仅适合路由数量固定且有限的场景，若应用存在大量动态生成的路由（如用户个人页、商品详情页），该方案不适用。
• 若页面包含异步请求数据，需配置插件的renderAfterDocumentEvent或renderAfterTime参数，等待数据加载完成后再生成HTML，确保静态内容完整。

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