如何在Preact（SSG+SPA）中配置混合项目类型？

Vike 支持通过页面级配置或路由规则实现混合渲染模式，子文件夹配置不生效通常是配置层级或规则写法问题，以下是具体配置示例：

1. 项目基础结构参考 #

假设你的项目目录结构如下：

├── pages/
│   ├── about/          # 默认 SSG 模式
│   │   └ +Page.jsx
│   ├── blog/           # 默认 SSG 模式
│   │   └ +Page.jsx
│   └── dashboard/      # 需设置为 SPA 模式的文件夹
│       ├── +Page.jsx
│       └ +config.js    # 子文件夹专属配置文件
└── vite.config.js

2. 子文件夹 SPA 模式配置 #

在目标文件夹（如 dashboard/）下创建 +config.js，覆盖全局默认的渲染规则：

// pages/dashboard/+config.js
export default {
  // 禁用预渲染，启用客户端 SPA 模式
  prerender: false,
  // 开启客户端路由接管，避免刷新页面出现 404
  clientRouting: true
}

3. 全局默认 SSG 配置 #

在项目根目录的 vike.config.js 中设置全局默认的 SSG 规则：

// vike.config.js
export default {
  // 全局默认启用预渲染（SSG）
  prerender: true,
  // 其他全局配置（如渲染器、页面模板等）
}

4. 路由匹配批量配置（可选） #

如果需要给多个路径批量设置 SPA 模式，可在全局配置中用路由规则实现：

// vike.config.js
export default {
  prerender: true,
  // 针对特定路由设置 SPA 模式
  routeConfig: {
    '/dashboard/*': {
      prerender: false,
      clientRouting: true
    },
    '/admin/*': {
      prerender: false,
      clientRouting: true
    }
  }
}

常见问题排查 #

• 确认配置文件命名正确：必须是 +config.js（注意开头的加号），且放在对应页面/文件夹层级下。
• 检查 Vike 版本：旧版本可能不支持子文件夹级配置，建议升级到最新稳定版。
• 验证构建结果：执行 npm run build 后，查看 dist/ 目录，SPA 模式的文件夹不会生成静态 HTML 文件，仅包含客户端资源。

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