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+）。
1-3、核心原理（同构渲染）
- 编译阶段：将 Vue 组件编译为可在 Node.js 运行的服务端 bundle
- 服务端渲染：在 Node.js 中创建 Vue 实例，执行 asyncData 获取数据，渲染为 HTML
- 客户端激活：浏览器下载 HTML 和 JS 后，Vue 会接管静态 HTML 使其可交互
- 状态同步：通过 window.__NUXT__将服务端状态传递到客户端
1-4、SSR和SSG对比
- 服务端渲染（SSR）：服务器生成 HTML 发送到客户端。
提示
// SSR - 请求时渲染
用户请求 → 服务器 → Nuxt应用 → 执行asyncData → 渲染HTML → 返回给用户
↓
每个请求都重新执行
- 静态站点生成（SSG）：预渲染页面为静态 HTML。
提示
// SSG - 构建时预渲染
npm run generate → 爬取路由 → 执行asyncData → 生成HTML文件 → 部署到CDN
↓
用户请求 → CDN直接返回预生成的HTML
| 特性维度 | SSR (服务端渲染) | SSG (静态站点生成) |
|---|---|---|
| 渲染时机 | 每次请求时实时渲染 | 构建时预渲染 |
| 部署位置 | Node.js 服务器 | CDN/静态服务器 |
| 数据更新 | 实时更新 | 重新构建后更新 |
| 首屏性能 | 快 (服务端生成HTML) | 极快 (CDN缓存) |
| 适合场景 | 动态内容、用户交互 | 内容稳定、访问量大 |
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);
}
- 避免在 asyncData 中使用浏览器 API（如 window），可在 mounted 生命周期或客户端钩子中调用。
8、在 Nuxt SSR 中不会执行的 Vue 生命周期钩子
- 与 DOM 相关的钩子：
beforeMount/mounted：涉及 DOM 挂载beforeUpdate/updated：涉及 DOM 更新- SSR 环境下没有真实的 DOM 操作
- 组件激活/卸载相关钩子：
activated/deactivated：与 keep-alive 组件相关beforeDestroy/destroyed：组件卸载行为- 这些都属于客户端特有的行为