IGA Pages 支持多种主流前端、后端及全栈框架。大多数场景下,平台会自动检测项目所用框架并应用默认构建配置,无需额外手动设置即可完成部署。
本文档涵盖以下三类框架的接入说明:
类型 | 支持的框架 / 工具 |
|---|---|
前端 | Create React App、Vue CLI、Vite、Angular、VitePress、VuePress、Docusaurus、Hexo |
后端 | Express、Koa(基于 IGA Pages Functions 运行) |
全栈 | Next.js(14 及以上版本)、Nuxt(3.17.7 及以上、Nuxt 4)、Astro(5 / 6 / 7) |
下表汇总了各前端框架的默认构建命令与输出目录。如需自定义,请参见IGA Pages 构建指南中的构建配置章节。
框架 | 构建命令 | 输出目录 |
|---|---|---|
Create React App |
|
|
Vue CLI |
|
|
VuePress |
|
|
Vite |
|
|
VitePress |
|
|
Hexo |
|
|
Angular |
|
|
Docusaurus |
|
|
说明
IGA Pages 会根据项目结构自动检测框架类型,并应用上述默认值。
IGA Pages 支持使用 Node.js 第三方框架(Express / Koa)开发后端服务。后端代码运行在 IGA Pages Functions 环境中,需遵循以下共同约定。
[[default]].js(或 .ts)作为文件名,放置在 api/ 目录下,平台通过此命名识别 Catch-all 路由处理器。app.listen(),端口监听由平台自动管理。export default)。Express 是流行的 Node.js Web 框架,提供简洁灵活的中间件与路由机制。
// api/[[default]].js import express from "express"; const app = express(); app.use(express.json()); // 路由路径基于文件系统位置,对应路由为 /api/users app.get("/users", (req, res) => res.json({ users: [] })); app.post("/users", (req, res) => res.status(201).json({ user: req.body })); app.get("/users/:id", (req, res) => res.json({ user: req.params.id })); export default app; // 不要调用 app.listen()
Koa 是由 Express 原班人马打造的下一代 Node.js Web 框架,基于 async/await 提供更优雅的中间件写法。
// api/[[default]].js import Koa from "koa"; import Router from "@koa/router"; import bodyParser from "koa-bodyparser"; const app = new Koa(); const router = new Router(); app.use(bodyParser()); router.get("/users", (ctx) => { ctx.body = { users: [] }; }); router.post("/data", (ctx) => { ctx.status = 201; ctx.body = { data: ctx.request.body }; }); app.use(router.routes()); app.use(router.allowedMethods()); export default app; // 不要调用 app.listen()
IGA Pages 支持 Next.js 14 及以上版本,兼容以下两种渲染模式:
模式 | 说明 |
|---|---|
SSR(服务端渲染) | 页面在请求时动态渲染,适用于需要实时数据的场景 |
Static Export(静态导出) | 构建时预渲染为纯静态 HTML,适用于内容型站点 |
部署时平台会根据 Next.js 配置自动识别渲染模式,通常无需额外设置。
Astro 是面向内容型站点的现代前端框架,支持纯静态、SSR 与混合渲染模式。IGA Pages 兼容 Astro 5、6、7。
项目 | 说明 |
|---|---|
支持版本 | Astro 5、6、7 |
纯静态 | 支持,无需安装 adapter |
SSR / 混合渲染 | 支持,需安装 |
纯静态项目保持默认 output: "static",无需额外配置即可部署。SSR 或混合渲染项目需安装 adapter:
npm install @iga-pages/astro
import { defineConfig } from "astro/config"; import igaAdapter from "@iga-pages/astro"; export default defineConfig({ output: "server", adapter: igaAdapter(), });
Nuxt 是基于 Vue 的全栈框架,支持 SSR、预渲染与混合渲染。IGA Pages 兼容 Nuxt 3.17.7 及以上版本与 Nuxt 4。
项目 | 说明 |
|---|---|
支持版本 | Nuxt 3.17.7 及以上、Nuxt 4 |
渲染能力 | SSR、预渲染、混合渲染 |
安装 IGA Pages 模块:
npm install @iga-pages/nuxt
export default defineNuxtConfig({ modules: ["@iga-pages/nuxt"], });
默认使用 nuxt build,可同时保留 SSR、Server API 与预渲染能力。需要静态化的页面通过 routeRules.prerender 单独声明:
export default defineNuxtConfig({ modules: ["@iga-pages/nuxt"], routeRules: { "/": { prerender: true }, "/blog/**": { prerender: true }, "/dashboard/**": { swr: 60 }, }, });
如果您不使用任何框架,也可以直接上传自定义静态资产(HTML / CSS / JS / 图片等)进行部署。只需将所有静态文件放置在项目的输出目录中,并在构建配置中指定该目录路径即可。
适用场景: