文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>边缘安全加速平台 EO>Pages>框架指南>全栈>Nuxt

Nuxt

最近更新时间：2026-01-09 17:47:32

我的收藏

本页目录：

Nuxt 是一个能让您用 Vue.js 轻松构建出快速、强大且对搜索引擎友好的网站的开发框架。
注意：
目前 Pages 对 Nuxt 版本的支持为 3.16.0+，推荐使用最新的 Nuxt 4。

核心特点

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）
✓
中间件
✓
流式传输
✓
Layer
暂不支持
@nuxt/image
优化暂不支持，不影响正常图片渲染

在 Pages 部署 Nuxt 项目

Git 连接部署

集成好适配器后，您可以将项目提交到 GitHub，GitLab 等平台，然后使用我们提供的 导入 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.ts
export default defineNuxtConfig({
  routeRules: {
    // 为新闻版块启用 SWR，缓存有效期为 5 分钟。
    // 这意味着新闻内容最多有 5 分钟的延迟，但页面加载速度始终是静态的。
    '/news/**': { swr: 300 },

    // 对于更新不频繁的“关于我们”页面，可以设置更长的缓存时间，例如一天。
    '/about': { swr: 86400 } // 24 * 60 * 60
  }
})
这种方法特别适用于内容会周期性更新但不需要实时性的场景，例如：电商网站的商品详情页、新闻门户的文章页、以及依赖外部 API 的数据展示页面。

更多资源

Nuxt 官方文档
中国站
目录