Vike
Vike 是基于 Vite 的全栈 Web 框架，采用文件式路由与约定优于配置，适合从静态站点到动态应用等多种场景。
注意：
目前 Pages 对 Vike 版本的支持为 1.0.5+，支持全栈部署。 Node.js 22 及以上版本。
核心特点（Vike）
文件式路由：基于
pages/ 目录的约定文件（+Page.*、+config.ts、+data.ts、+onBeforeRender.ts 等）自动生成路由，支持动态路由（如 pages/posts/@category/@slug/）。按页配置：每个路由可独立设置
prerender、stream、passToClient 等，实现按页的 SSG、流式或 SSR，无需全局一刀切。数据与生命周期：通过
+data.ts 在服务端取数并注入页面，通过 +onBeforeRender 在渲染前修改 pageContext，数据与渲染逻辑清晰分离。多视图层：主应用可用 React（vike-react）、Vue（vike-vue）或 Svelte（vike-svelte）；同一项目内也可按路由使用不同框架。
Vite 驱动：构建与开发均基于 Vite，支持快速 HMR、代码分割与 TypeScript，与现有 Vite 生态兼容。
优势
轻量灵活：与 Vite 生态无缝集成，开发与构建体验一致，HMR 迅速、打包高效。
按页控制：同一项目内可按路由选择 SSR、SSG 或流式渲染，无需全局统一方案，便于做性能与 SEO 优化。
多框架可选：支持 React、Vue、Svelte，甚至在同一应用中按路由使用不同视图层，迁移或混用成本低。
类型友好：与 TypeScript 配合良好，
pageContext、路由参数与数据流可端到端类型化。场景覆盖广：从静态站点、文档站到带鉴权与动态数据的应用均可胜任，部署方式灵活。
快速开始
在 EdgeOne Pages 上开始部署 Vike 项目：
通过 Git 仓库导入 Vike 项目。
从 Pages 的模板库选择 Vike 模板。
使用下述 Vike 示例项目。
本模板中页面与框架的对应关系为：首页 `/` → React，SSG 页 `/ssg` → Vue，Posts 动态路由 `/posts/@category/@slug` → Svelte，便于体验同一应用内按路由切换视图层。
Pages 对 Vike 的支持
Pages 通过
@edgeone/vite 适配器支持 Vike 项目。下表为目前支持的关键特性，平台会持续完善支持，实验性功能可能尚未完全稳定。Vike 特性 | 支持情况 |
文件式路由（pages/） | ✅ |
服务端渲染 (SSR) | ✅ |
静态站点生成 (SSG / prerender) | ✅ |
HTML 流式传输 (stream) | ✅ |
动态路由（@param） | ✅ |
多视图层（React / Vue / Svelte） | ✅ |
数据与生命周期（+data.ts 等） | ✅ |
服务端 API 接口 | 不支持 |
在 Pages 部署 Vike 项目
1. 安装 Pages 的 Vike 适配器
Pages 的 Vike 适配器为 @edgeone/vite，可将 Vike（基于 Vite）应用的构建结果自动适配到 Pages 平台。安装命令：
npm install @edgeone/vite
2. 配置 vite.config
在项目的
vite.config.ts（或 vite.config.js）中接入适配器，并指定 serverWrapper: 'vike'：import { defineConfig } from "vite";import vike from "vike/plugin";import edgeone from "@edgeone/vite";export default defineConfig({plugins: [vike(), edgeone({ serverWrapper: "vike" })],});
构建命令使用
npm run build（内部执行 vike build），输出目录为 dist，供 Pages 使用。edgeone() 可传入以下选项（均为可选）：serverWrapper（
'vike' | 'autoDetect' | 'ssrRender' | 'webHandler'）：服务端运行时模式。部署 Vike 项目时需设为 'vike'；'autoDetect' 会根据是否使用 vike 插件自动选择；ssrRender / webHandler 为通用 SSR 或 Web Handler 预设。clientBuildDir（
string）：客户端构建产物目录，覆盖默认的 dist/client 等检测逻辑。serverBuildDir（
string）：服务端构建产物目录，覆盖默认的 dist/server 等检测逻辑。serverEntry（
string）：服务端入口文件路径，覆盖默认的 entry-server.js 等检测逻辑。routes（
string[]）：自定义路由列表（如 ['/','/about']），不传时 Vike 会从 pages/ 自动扫描。ssr（
boolean）：是否启用 SSR，默认由适配器根据项目推断。3. 部署项目
Git 连接部署
CLI 部署
edgeone pages deploy
服务端渲染 (SSR)
Vike 中未设置
prerender: true 的页面默认即为服务端渲染：每次请求时在服务器执行数据逻辑并渲染页面，再返回完整 HTML。数据：在
+data.ts 中定义服务端数据函数，返回值会注入 pageContext，页面组件通过 usePageContext() 或 props 使用；支持 async，便于请求时拉取 API、读 Cookie 等。渲染前钩子：
+onBeforeRender.ts 在渲染前执行，可修改 pageContext、做重定向或根据 routeParams/请求信息决定是否渲染。按页独立：SSR 与 SSG/流式按路由配置，同一应用里部分页面 SSR、部分预渲染即可。
构建设置： 构建命令
npm run build（内部 vike build），输出目录 dist（由 Vite + @edgeone/vite 生成）。静态站点生成（SSG）
若希望某页在构建时预渲染为静态 HTML，可在该页的
+config.ts 中设置 prerender: true。构建阶段会生成对应静态文件，部署后直接命中静态文件的路由，无需每次请求时在服务端渲染。示例（
pages/ssg/+config.ts）：export default {prerender: true,};
流式渲染
流式渲染指服务端不等待整页就绪，而是先输出部分 HTML（如壳或首屏），再按块持续推送后续内容，从而改善 TTFB 和首屏体验。Pages 部署 Vike 项目在页面维度支持该能力：在对应路由的
+config.ts 中设置 stream: true 即可启用该页的 HTML 流式输出，与 SSR/SSG 一样按页配置、可与其他路由混用。视图层如何配合取决于所用框架（如异步组件、数据依赖的边界等），由各框架的约定与 API 决定；Pages 对 Vike 流式响应只负责在服务端按配置开启。
示例（
pages/stream/+config.ts）：import type { Config } from "vike/types";export default {stream: true,} satisfies Config;
