框架指南

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



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









了解编译命令和输出目录的相关概念，以便顺利进行部署。



编译命令：这是在项目构建时需要执行的命令，例如 npm run build。编译命令将在 Bash shell 中运行，因此您可以使用 Bash 兼容的语法。

输出目录：构建后生成的可部署 HTML 文件和资源的目录。该目录相对于项目目录，默认情况下项目目录为根目录（/）。请确保指定的输出目录包含所有必要的文件，以便 EdgeOne Pages 能够顺利进行部署。



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



Next.js

特点：Next.js 是一个基于 React 的框架，支持静态生成（SSG），非常适合构建高性能的 Web 应用和网站。



默认构建设置如下：

编译命令: npm run build

输出目录: out



使用建议：在开发过程中，可以使用 npm run dev 启动本地开发服务器。Next.js 提供了强大的路由功能和 API 路由，适合构建复杂的应用。确保在构建前配置好 next.config.js 文件，以满足特定需求。

说明：

Pages 目前支持的 Next.js 需配置为静态导出模式，可尝试修改 next.config.js 如下：

/** @type {import('next').NextConfig} */

const nextConfig = {

output: 'export', // 启用静态导出

images: {

unoptimized: true // 静态导出时需要禁用图片优化

},

trailingSlash: true, // 添加尾部斜杠，提高兼容性

};



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 的框架，支持服务器端渲染（SSR）和静态站点生成。



默认构建设置如下：

编译命令: 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 的简洁语法，快速构建交互式应用。