边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
      • 前端
      • 后端
      • 全栈
        • Next.js
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
      • 使用 CNB 插件
      • 使用 IDE 插件
      • 使用 CodeBuddy IDE
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
      • 概览
      • Edge Functions
      • Node Functions
    • 日志分析
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • AI
        • 对话型大模型集成
        • 图片大模型集成
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
        • Paddle 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用通用大模型快速搭建AI应用
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态

前端

EdgeOne Pages 支持多种流行的前端框架,旨在优化您的网站构建和运行体验。我们为一系列热门前端框架提供优质支持,您可以使用各种前端框架构建 Web 应用程序,并且在许多情况下,无需进行任何前期配置即可完成部署。

为了帮助您更快速地开始,我们提供了一些现成的模板,创建项目时您可以一键部署,轻松构建您的应用程序。



了解构建命令和输出目录的相关概念,以便顺利进行部署。

构建命令:这是在项目构建时需要执行的命令,例如 npm run build。构建命令将在 Bash shell 中运行,因此您可以使用 Bash 兼容的语法。
输出目录:构建后生成的可部署 HTML 文件和资源的目录。该目录相对于项目目录,默认情况下项目目录为根目录(/)。请确保指定的输出目录包含所有必要的文件,以便 EdgeOne Pages 能够顺利进行部署。

接下来,我们将展示每个框架的基本配置,帮助您快速在 EdgeOne Pages 上进行部署。

说明:
Pages 已全面支持 Next.js 的多种渲染模式,包括 SSR,ISR,SSG,具体的使用方式可以参考文档 框架指南 - 全栈 - Next.js
Nuxt.js,Remix,Svelte 对服务器端渲染(SSR)的支持目前正在开发中。


React.js

特点:React.js 是一个用于构建用户界面的 JavaScript 库,适合构建单页应用(SPA)和复杂的用户界面。

默认构建设置如下:
构建命令: npm run build
输出目录: build

使用建议:确保在构建前安装所有依赖,并使用 npm start 进行本地开发。


Vue.js

特点:Vue.js 是一个渐进式框架,易于上手,适合快速开发和原型设计。

默认构建设置如下:
构建命令: npm run build
输出目录: dist

使用建议:使用 Vue CLI 创建项目,可以自动配置构建设置。


Nuxt.js

特点:Nuxt.js 是一个基于 Vue.js 的框架,支持静态站点生成。

默认构建设置如下:
构建命令: npm run generate
输出目录: dist

使用建议:适合需要 SEO 优化的项目,确保在生成前配置好路由。


Astro

特点:Astro 是一个现代静态站点生成器,支持多种前端框架,注重性能。

默认构建设置如下:
构建命令: npm run build
输出目录: dist

使用建议:利用 Astro 的组件系统,可以轻松集成 React、Vue 等框架。


Docusaurus

特点:Docusaurus 是一个专注于文档网站的框架,提供了良好的默认样式和功能。

默认构建设置如下:
构建命令: npm run build
输出目录: build

使用建议:适合构建技术文档和博客,使用 Markdown 格式编写内容。


Angular

特点:Angular 是一个功能强大的前端框架,适合构建大型企业级应用。

默认构建设置如下:
构建命令: npm run build
输出目录: dist/angular/browser

使用建议:使用 Angular CLI 创建项目,确保遵循最佳实践。


Gatsby

特点:Gatsby 是一个基于 React 的静态站点生成器,注重性能和 SEO。

默认构建设置如下:
构建命令: npm run build
输出目录: public

使用建议:利用丰富的插件生态系统,增强站点功能。


Hexo

特点:Hexo 是一个快速、简洁的博客框架,基于 Node.js。

默认构建设置如下:
构建命令: hexo generate
输出目录: public

使用建议:使用主题和插件自定义博客外观和功能。


Qwik

特点:Qwik 是一个新兴的框架,专注于极致的性能和快速加载。

默认构建设置如下:
构建命令: npm run build
输出目录: dist

使用建议:适合需要高性能的应用,关注用户体验。


Remix

特点:Remix 是一个现代的 React 框架,支持服务器端渲染和数据获取。

默认构建设置如下:
构建命令: npm run build
输出目录: build/client

使用建议:利用 Remix 的数据加载功能,优化页面性能。


Solid

特点:Solid 是一个高性能的前端框架,注重响应式编程。

默认构建设置如下:
构建命令: npm run build
输出目录: dist

使用建议:适合需要高效渲染的应用,关注组件的性能。


Svelte

特点:Svelte 是一个新颖的框架,编译时将组件转换为高效的 JavaScript 代码。

默认构建设置如下:
构建命令: npm run build
输出目录: build

使用建议:利用 Svelte 的简洁语法,快速构建交互式应用。