边缘安全加速平台 EO Nuxt

一、核心特点

Nuxt 的核心特性可以概括为“约定优于配置”的理念，在此理念下为开发者提供了一整套解决方案，旨在提升开发体验和优化应用性能。具体包括：

·多种渲染模式：这是 Nuxt 最著名也是最核心的特性。它让你能够根据项目需求，自由选择最合适的渲染策略，而无需重写大量代码。

·文件式路由：Nuxt 会自动根据你放在 pages/ 目录下的 Vue 文件结构来生成应用的路由配置。

·强大的数据获取：为了配合服务端渲染，Nuxt 提供了专门的 Composables (组合式函数) 来处理数据获取。

·自动导入：Nuxt 会自动导入特定目录中定义的组件、组合式函数和插件。开发者无需手动 import，在任何 .vue 文件中直接使用组件和函数。

·服务端引擎 Nitro：这是 Nuxt 3/4 的“心脏”，一个全新的、高性能的服务端引擎。

二、快速开始

在 EdgeOne Makers 上快速部署 Nuxt 的项目，可以通过以下方式：

·通过 Git 仓库导入 Nuxt 项目。

·从 Makers 模板库选择 Nuxt 模板进行部署。

了解 Nuxt 在 Makers 的部署表现，可以点击下方的示例模板：

三、Makers 对 Nuxt 的特性支持

Makers 支持 Nuxt@3.16.0+ 的部署，推荐使用 Nuxt4 的最新版本，下表是 Makers 目前支持 Nuxt 的关键特性，如下：

Nuxt 特性	支持情况
服务端渲染（SSR）	✓
静态站点生成（SSG）	✓
增量静态生成（ISR/SWR）	✓
中间件	✓
流式传输	✓
Layer	暂不支持
@nuxt/image	优化暂不支持，不影响正常图片渲染

四、Git 连接部署

集成好适配器后，你可以将项目提交到 GitHub，GitLab 等平台，然后使用我们提供的工具导入 Git 仓库。

五、CLI 部署

也可以安装 Makers 的脚手架工具，详细安装和使用方法请参考 EdgeOne CLI。配置完成后，使用 edgeone makers 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 的数据展示页面。

九、更多资源

·Nuxt 产品文档