1、Nuxt.js 概念

1-1、Nuxt.js 是什么？

基于 Vue.js 的全栈框架，提供开箱即用的服务端渲染（SSR）、静态站点生成（SSG）、API 路由等功能。

核心目标：简化 Vue 应用的开发流程，提升 SEO 和首屏加载性能。

1-2、核心特性

• 服务端渲染（SSR）：服务器生成 HTML 发送到客户端。

• 静态站点生成（SSG）：预渲染页面为静态 HTML。

• 自动路由：基于 pages/ 目录结构生成路由。

• 模块化：通过模块扩展功能（如 Axios、Auth、Tailwind 等）。

• 开发友好：热更新、TypeScript 支持、Vite 集成（Nuxt 3+）。

2、asyncData 和 fetch 的区别

asyncData：仅用于页面组件，在服务端渲染阶段运行，返回的数据会合并到组件 data 中。

fetch：可用于页面或组件，支持客户端和服务端执行，通常用于填充 Vuex 状态（Nuxt 2）

Nuxt 3：推荐使用 useFetch 或 useAsyncData（基于 Composition API）

3、在 Nuxt 中实现全局状态管理

Nuxt 2：默认集成 Vuex，通过 store/ 目录自动注册模块。

Nuxt 3：推荐使用 Pinia（需手动安装），或轻量级方案 useState（基于 Composition API）。

4、如何优化 Nuxt 应用的 SEO？

使用 useHead（Nuxt 3）或 head() 方法配置页面标题、描述、结构化数据。

服务端渲染（SSR）或静态生成（SSG）确保爬虫可抓取完整内容。

合理使用 meta 标签和 Open Graph 协议。

5、Nuxt 模块的作用是什么

Nuxt 模块用于扩展框架功能，例如：

• @nuxtjs/axios：封装 HTTP 请求，支持服务端和客户端调用。

• @nuxt/image：自动优化图片（压缩、懒加载、适配多分辨率）。

• 配置方式：在 nuxt.config.js 的 modules 数组中引入。

6、如何实现 Nuxt 应用的性能优化

• 代码拆分：利用 Nuxt 自动按页面拆分代码的特性。

• 静态缓存：对不常变动的页面使用 nuxt generate 生成静态 HTML。

• 图片优化：通过 @nuxt/image 实现懒加载和格式转换。

• CDN 加速：配置 publicPath 指向 CDN 地址。

7、如何在 Nuxt 中处理服务端和客户端环境差异

• 使用 process.client 或 process.server 判断当前环境。

if (process.client) {
  console.log(window.innerWidth);
}

• 避免在 asyncData 中使用浏览器 API（如 window），可在 mounted 生命周期或客户端钩子中调用。