边缘开发者平台

Pages
- 产品简介
- 快速开始
  - 导入 Git 仓库
  - 从模板开始
  - 直接上传
  - 从 AI 开始
- 框架指南
  - 前端
    - Vite
    - React
    - Vue
    - 其他框架
  - 后端
  - 全栈
    - Next.js
    - Nuxt
    - Astro
    - React Router
    - SvelteKit
    - TanStack Start
    - Vike
  - 自定义 404 页面
- 项目指南
  - 项目管理
  - edgeone.json
  - 缓存配置
  - 错误码
- 构建指南
- 部署指南
  - 概览
  - 触发部署
  - 管理部署
  - 部署按钮
  - 使用 Github Action
  - 使用 Gitlab CI/CD
  - 使用 CNB 插件
  - 使用 IDE 插件
  - 使用 CodeBuddy IDE
- 域名管理
  - 概览
  - 自定义域名
  - 配置 HTTPS 证书
    - 概览
    - 申请免费证书
    - 使用 SSL 托管证书
  - 配置 DNS 的 CNAME 记录
- 可观测性
  - 概览
  - 指标分析
  - 日志分析
- Pages Functions
  - 概览
  - Edge Functions
  - Cloud Functions
    - 概览
    - Node Functions
- 中间件
- KV 存储
- 边缘 AI
- API Token
- EdgeOne CLI
- Pages MCP
- 消息通知
- 集成指南
  - AI
    - 对话型大模型集成
    - 图片大模型集成
  - 数据库
    - Supabase 集成
    - Pages KV 集成
  - 电商
    - Shopify 集成
    - WooCommerce 集成
  - 支付
    - Stripe 集成
    - Paddle 集成
  - CMS
    - WordPress 集成
    - Contentful 集成
    - Sanity 集成
    - Payload 集成
  - 身份验证
    - Supabase 集成
    - Clerk 集成
- 最佳实践
  - 使用通用大模型快速搭建 AI 应用
  - 使用边缘 AI 模型快速搭建对话型 AI 站点
  - 使用 Shopify 搭建电商平台
  - 使用 Supabase 和 Stripe 搭建 SaaS 站点
  - 如何快速搭建公司品牌站点
  - 如何快速搭建博客站点
- 迁移指南
  - 从 Vercel 迁移至 EdgeOne Pages
  - 从 Cloudflare Pages 迁移至 EdgeOne Pages
  - 从 Netlify 迁移至 EdgeOne Pages
- 排障指南
- 常见问题
- 联系我们
- 产品动态

Vite

Vite 是一款现代化的前端构建工具，旨在显著提升开发体验与构建效率。其核心架构如下：
1. 开发服务器：基于原生 ES 模块，提供功能丰富的开发支持，包含速度极快的模块热替换（HMR）。
2. 构建指令：基于 Rollup 进行打包，支持客户端与服务端双端构建，可输出高度优化的生产资源。
3. SSR 支持：内置服务端渲染原语，提供 ssrLoadModule、transformIndexHtml 等 API，支持构建全栈应用。
下面将介绍如何使用 Vite 框架将静态站点和全栈应用部署到 EdgeOne Pages。
部署静态网站
Git 部署
1. 将您的代码推送到远程仓库（GitHub、Gitee、Coding 仓库）。
2. ﻿将项目导入 到 EdgeOne Pages。如果您没有 Vite 项目，可以使用 Vite React 模板。
3. EdgeOne Pages 会检测到你正在使用 Vite，并会为你的部署开启相应的正确配置。
4. 你的应用被部署好了！（示例：vite-react.edgeone.app）
﻿
在你的项目被导入和部署后，对指定生产分支（默认为“main”）的所有提交都会自动触发新的部署。查看 Git 集成 了解更多。
CLI 部署
1. 安装 EdgeOne CLI 并初始化。
2. 运行 edgeone pages deploy -n <project name> 来部署。
3. 你的应用被部署好了。（示例：vite-react.edgeone.app）
npm install -g edgeone
edgeone login
edgeone pages deploy -n vite-react-demo
部署成功后点击 Console 的链接可以访问具体构建信息和部署后的 URL。
﻿
原生 Vite SSR 部署
@edgeone/vite 是 Pages 提供的官方 Vite 适配器，用于生成 Pages 部署产物。配合 Pages 的脚手架工具，可快速将 Vite 全栈项目部署到 Pages 平台。
1. 安装适配器
npm install @edgeone/vite
2. 配置 Vite
在 vite.config.ts 中引入并启用适配器：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import edgeoneAdapter from "@edgeone/vite";
﻿
export default defineConfig({
  plugins: [
    react(),
    edgeoneAdapter(),
  ],
});
注意：
原生 Vite SSR 方案要求开发者自行实现服务端渲染逻辑。使用 @edgeone/vite-adapter 时，需确保服务端入口文件（如 entry-server.js）导出的渲染函数返回完整的 HTML 字符串或标准 Web Response 对象。
3. 部署项目
Git 连接部署
集成好适配器后，您可以将项目提交到 GitHub，GitLab 等平台，然后使用我们的 导入 Git 仓库。
CLI 部署
也可以使用 Pages 的脚手架工具部署本地项目，详细安装和使用方法请参考 EdgeOne CLI。适配器配置完成后，运行下面的命令即可快速部署：
edgeone pages deploy
在部署过程中，CLI 会先自动构建项目，然后将构建产物上传并发布。
更多资源
﻿Vite 官方文档﻿
﻿

部署静态网站
- Git 部署
- CLI 部署
原生 Vite SSR 部署
更多资源