Nuxt.js 是一个基于 Vue.js 的通用应用框架，它简化了使用 Vue 构建服务端渲染 (SSR) 应用的流程。除了 SSR 之外，Nuxt.js 还支持静态站点生成（Static Site Generation, SSG），渐进式网络应用（Progressive Web Apps, PWA），单页面应用（Single Page Application, SPA）等多种模式。以下是 Nuxt.js 的一些深度介绍和代码案例，以及其在 SEO 方面的作用。
代码案例
创建一个新的 Nuxt.js 项目并添加一个简单的页面：
npx create-nuxt-app my-nuxt-project
选择默认选项后进入项目目录，并在 pages 文件夹下创建一个 index.vue 文件：
<template>
<div>
<h1>欢迎来到我的 Nuxt.js 网站</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '这是首页内容'
}
},
head() {
return {
title: '首页',
meta: [
{ hid: 'description', name: 'description', content: '这是首页的描述' }
]
}
}
}
</script>
这里定义了一个简单的页面，同时使用 head 方法来定制页面的 <title> 和 <meta> 标签，这对于 SEO 非常重要。
SEO 作用解析
Nuxt.js 对于 SEO 有以下几个方面的好处：
- 服务器端渲染 (SSR)：与传统的单页应用程序（SPA）相比，Nuxt.js 可以在服务器端预先渲染页面，这意味着搜索引擎爬虫可以直接看到完全渲染的内容，而不需要等待 JavaScript 执行，这有助于提高搜索引擎抓取效率和索引质量。
- 动态 Meta 标签：如上面的代码示例所示，Nuxt.js 允许你为每个页面动态地设置标题和元标签，这对于确保每个页面都有独特的、描述性的标题和描述至关重要，从而提高点击率和搜索排名。
- 快速首屏加载：由于页面是在服务器端预渲染的，用户访问网站时会更快地看到页面内容，提高了用户体验和潜在的SEO评分。
- 链接结构：自动路由生成功能使得网站的 URL 结构更加清晰合理，有利于内部链接建设和SEO。
- 静态站点生成：对于不需要频繁更新的内容，可以使用 Nuxt.js 生成静态站点，这样的静态页面非常适合SEO，因为它们几乎不需要任何服务器端处理即可提供给用户
对于版本，Nuxt 2 到 Nuxt 3 的升级中，这些变化涵盖了性能、框架架构、特性支持以及开发者体验等多方面。以下是两者的主要区别：
版本差异
-
核心架构：
- Nuxt 2：基于 Vue 2 和 Webpack，运行在传统的 Node.js 环境中。
- Nuxt 3：基于 Vue 3 和 Vite（默认），并支持 Webpack 5，重写了底层架构以支持更现代的功能和增强性能。
-
Vue 3 支持：
- Nuxt 2：仅支持 Vue 2，无法利用 Vue 3 的新特性。
- Nuxt 3：完全基于 Vue 3，提供更好的开发体验和性能。
-
性能：
- Nuxt 3：Vite 提供更快的开发和构建速度，以及即时热重载功能。
- Nuxt 2：依赖于 Webpack 4，大型项目中的构建和热重载性能较差。
-
Server API 功能：
- Nuxt 2：需要额外服务器框架处理 API 请求。
- Nuxt 3：内置 Server API 支持，方便全栈应用开发。
-
渲染模式：
- Nuxt 2：支持 SSR、静态生成和 SPA 模式，但配置较为复杂。
- Nuxt 3：简化了不同渲染模式的使用，并支持 Edge 渲染。
-
模块系统：
- Nuxt 3：引入新的模块和插件系统，原生支持 TypeScript。
- Nuxt 2：模块系统不支持 TypeScript。
-
TypeScript 支持：
- Nuxt 3：完整支持 TypeScript，自动类型推导和检查。
- Nuxt 2：部分支持，需手动配置。
-
文件系统路由：
- Nuxt 3：增强了自动化程度，支持动态路径参数和类型推导。
- Nuxt 2：基础功能较少。
-
中间件和生命周期钩子：
- Nuxt 3：更加灵活，适合大型项目的复杂逻辑需求。
- Nuxt 2：相对基础。
-
兼容性：
- Nuxt 3：提供了向后兼容的迁移工具。
- Nuxt 2：已停止更新主要功能，仅提供长期支持。
网络请求封装
在 Nuxt 3 中，网络请求通常通过 useFetch 或 $fetch 来实现。这两个函数都是由 Nuxt.js 内置提供的，用于发起 HTTP 请求，并且它们都与 Nuxt 的数据获取机制集成得很好。
useFetch：这是一个组合式函数，它包装了useAsyncData和$fetch，返回响应式的可组合函数。你可以用它来轻松地获取和管理异步数据。$fetch：是一个全局方法，可以在组件的任意位置被调用，无需引入额外的 API。它封装了底层的网络请求逻辑，使开发者可以专注于业务逻辑。
对于网络请求的封装，开发者可以根据自己的需求对 useFetch 或 $fetch 进行进一步封装，例如添加统一的基础 URL、设置默认的请求头、处理错误、添加拦截器等。下面是一个简单的 useFetch 封装示例：
// composables/useHttp.ts
import { useFetch, UseFetchOptions } from '#app';
interface HttpParms<T> {
url: string;
method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
query?: Record<string, any>;
body?: Record<string, any>;
}
export const useHttp = <T>(parms: HttpParms<T>, options?: UseFetchOptions<T>) => {
return useFetch<T>(parms.url, {
baseURL: process.env.API_URL,
method: parms.method || 'GET',
query: parms.query,
body: parms.body,
...options
});
};
然后可以在页面或组件中使用这个封装过的函数：
<script setup lang="ts">
import { useHttp } from '~/composables/useHttp';
const fetchData = async () => {
const { data, pending, error } = await useHttp<{ id: number; name: string }>({
url: '/api/data'
});
console.log(data.value); // 打印获取的数据
};
</script>
