# 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 | fetch (Nuxt 2.12+) |
|---|---|---|
| this 访问 | 不可用 | 可用 |
| 返回值 | 合并到组件 data | 无返回值 |
| 使用位置 | 仅页面组件 | 所有组件 |
| 存储位置 | 组件 data | Vuex store |
| 执行时机 | 组件创建前 | 组件创建后 |
# 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);
}
1
2
3
2
3
- 避免在 asyncData 中使用浏览器 API（如 window），可在 mounted 生命周期或客户端钩子中调用。
# 8、在 Nuxt SSR 中不会执行的 Vue 生命周期钩子
- 与 DOM 相关的钩子：
beforeMount/mounted：涉及 DOM 挂载beforeUpdate/updated：涉及 DOM 更新- SSR 环境下没有真实的 DOM 操作
- 组件激活/卸载相关钩子：
activated/deactivated：与 keep-alive 组件相关beforeDestroy/destroyed：组件卸载行为- 这些都属于客户端特有的行为