Nuxt
Nuxt 是一个能让你用 Vue.js 轻松构建出快速、强大且对搜索引擎友好的网站的开发框架。
注意：
目前 Pages 对 Nuxt 版本的支持为 3.16.0+，推荐使用最新的 Nuxt。
核心特点
Nuxt 的核心特性可以概括为“约定优于配置”的理念，在此理念下为开发者提供了一整套解决方案，旨在提升开发体验和优化应用性能。具体包括：
多种渲染模式：这是 Nuxt 最著名也是最核心的特性。它让你能够根据项目需求，自由选择最合适的渲染策略，而无需重写大量代码。
文件式路由：Nuxt 会自动根据你放在 pages/ 目录下的 Vue 文件结构来生成应用的路由配置。
强大的数据获取：为了配合服务端渲染，Nuxt 提供了专门的 Composables (组合式函数) 来处理数据获取。
自动导入：Nuxt 会自动导入特定目录中定义的组件、组合式函数和插件。开发者无需手动 import，在任何 .vue 文件中直接使用组件和函数。
服务端引擎 Nitro：这是 Nuxt 3/4 的“心脏”，一个全新的、高性能的服务端引擎。
快速开始
在 EdgeOne Pages 上快速部署 Nuxt 的项目，可以通过以下方式：
通过 Git 仓库导入 Nuxt 项目
从 Pages 模版库选择 Nuxt 模版进行部署
了解 Nuxt 在 Pages 的部署表现，可以点击下方的示例模板：
Pages 对 Nuxt 的特性支持
Pages 支持 Nuxt 3.16.0+ 的部署，还是更推荐使用 Nuxt4 的最新版本，下表是 Pages 目前支持 Nuxt 的关键特性，如下：
Nuxt 特性 | 支持情况 |
服务端渲染（SSR） | ✅ |
静态站点生成（SSG） | ✅ |
增量静态生成（ISR/SWR） | ✅ |
中间件 | ✅ |
流式传输 | ✅ |
Layers | 暂不支持 |
@nuxt/image | 优化暂不支持，不影响正常图片渲染 |
在 Pages 部署 Nuxt 项目
Git 连接部署
CLI 部署
也可以安装 Pages 的脚手架工具，详细安装和使用方法请参考 EdgeOne CLI。配置完成后，使用
edgeone pages deploy命令部署项目。在部署过程中，CLI 会先自动构建项目，然后将构建产物上传并发布。注意：
EdgeOne CLI 版本要求 ≥ 1.2.4，部署前请先检查版本，避免部署失败。
服务端渲染 (SSR)
服务端渲染允许您在服务器上动态渲染页面。每次用户发起请求时，服务器动态获取数据并生成 HTML，提供更好的 SEO 和首屏加载体验。在 Nuxt 框架中默认使用 SSR。
在
<script>中可以使用 Nuxt 提供的数据请求函数，不需要额外引入。Nuxt 自带两个可组合模块和一个内置库，用于在浏览器或服务器环境中进行数据取用：useFetch、useAsyncData 和 $fetch。
$fetch 是发起网络请求的最简单方式。
useFetch 是一个环绕 $fetch 的包裹器，在通用渲染中只取一次数据。
useAsyncData 是一个通用的异步任务处理器，它能将任何异步操作（如 API 请求、数据库查询、复杂计算）无缝集成到 Nuxt 的渲染生命周期中，并自动处理好服务器端渲染（SSR）、客户端导航和状态管理。
// $fetch<script setup lang="ts">const headers = useRequestHeaders(['cookie'])async function getCurrentUser () {return await $fetch('/api/me', { headers })}</script>// useFetch<script setup lang="ts">const { data } = await useFetch('/api/echo')</script>// useAsyncData<script setup lang="ts">const { data, error } = await useAsyncData('users', () => myGetFunction('users'))// 也可以这样编写const { data, error } = await useAsyncData(() => myGetFunction('users'))</script>
静态生成 (SSG)
Nuxt 提供了强大且灵活的静态站点生成 (SSG) 能力，支持从全局预渲染到页面级精细化控制的多种策略。
全局静态生成这是 Nuxt 最直接的静态化方式。通过执行构建命令
nuxt generate，Nuxt 的服务端引擎 Nitro 会启动一个爬虫，从应用入口开始，递归地访问所有内部链接，并将每个可访问的页面预渲染（Prerender）为静态的 HTML 文件。
页面级精细化控制 (Hybrid Rendering)对于更复杂的应用，您可能希望实现混合渲染。这可以通过在
nuxt.config.ts 文件中配置 routeRules 来实现。routeRules 允许您为匹配特定路径模式的路由声明渲染规则。export default defineNuxtConfig({routeRules: {'/about': {prerender: true},'/test/:id': {prerender: true}}})
增量静态生成（ISR/SWR）
除了完全静态预渲染，Nuxt 还通过其强大的服务端引擎 Nitro 提供了增量静态生成 (ISR) 的能力。其核心是实现了 Stale-While-Revalidate (SWR) 缓存策略。
您可以在
nuxt.config.ts 文件中，利用 routeRules 为特定路由模式精细地配置 ISR/SWR 行为。// nuxt.config.tsexport default defineNuxtConfig({routeRules: {// 为新闻版块启用 SWR，缓存有效期为 5 分钟。// 这意味着新闻内容最多有 5 分钟的延迟，但页面加载速度始终是静态的。'/news/**': { swr: 300 },// 对于更新不频繁的“关于我们”页面，可以设置更长的缓存时间，例如一天。'/about': { swr: 86400 } // 24 * 60 * 60}})
这种方法特别适用于内容会周期性更新但不需要实时性的场景，例如：电商网站的商品详情页、新闻门户的文章页、以及依赖外部 API 的数据展示页面。
更多资源
