一、基础概念与核心特性
1. Nuxt.js 的核心特性是什么？它与传统的 Vue SPA (单页应用) 最主要的区别是什么？
答： 核心特性包括：服务端渲染 (SSR)、静态站点生成 (SSG)、自动路由系统、强大的模块化等。最主要区别在于渲染模式：传统Vue SPA在客户端渲染，不利于SEO和首屏加载；而Nuxt.js默认支持服务端渲染，发送给浏览器的是完整的HTML页面。
2. 请解释 Nuxt.js 中的“通用应用”概念。
答： “通用应用”指一套代码既可以在服务端运行，也可以在客户端运行。服务端负责生成初始HTML（利于SEO和首屏加载），客户端则接管后续的交互，使其拥有像SPA一样的流畅体验。
3. Nuxt.js 提供了哪几种渲染模式？它们分别适用于什么场景？
答：
- Universal (SSR/SSG)： 默认模式。兼顾SEO和用户体验，适用于内容驱动型网站（如博客、电商、新闻站）。
- SPA (Single Page Application)： 与传统Vue SPA一致。适用于不需要SEO且交互复杂的后台管理系统、Web应用。
- Static (Pre-rendering)： 在构建时预生成所有HTML页面。适用于静态内容为主的网站（如文档、宣传页），拥有极快的加载速度和最佳SEO。
4. Nuxt.js 是如何实现自动路由的？
答： 基于 pages/ 目录的文件结构自动生成 Vue Router 配置。每个 .vue 文件都会映射为一个路由，嵌套路由通过创建子目录来实现，动态路由通过文件名加下划线来定义（如 _id.vue）。
5. 请说明 Nuxt.js 生命周期中 asyncData 和 fetch 方法的区别。
答：
asyncData: 组件级别，仅在页面组件中可用，在服务端和路由更新前调用。其返回的数据会合并到组件的 data 中。fetch(Nuxt 2): 组件级别，可用于任何组件，在服务端用于填充store，在客户端用于获取数据。不会自动合并数据到组件data。useFetch/useAsyncData(Nuxt 3): Composables，是asyncData和fetch的进化版，提供了更灵活的数据获取方式。
二、路由与数据获取
6. 如何在 Nuxt.js 中实现一个动态路由？例如，根据用户ID显示不同用户的页面。
答： 在 pages/ 目录下创建一个文件名以下划线开头Vue文件，如 pages/users/_id.vue。在组件中，可以通过 this.$route.params.id (Nuxt 2) 或 const route = useRoute(); const { id } = route.params; (Nuxt 3) 来获取动态参数。
7. 在 Nuxt.js 中，导航守卫应该在哪里设置？
答： 可以在以下位置设置：
- 中间件 (Middleware)： 最常用。可以全局使用、在布局中使用或在页面中使用。
- 全局守卫： 在插件中注入，使用
router.beforeEach等（不推荐，可能与Nuxt内部机制冲突）。 - 页面组件内： 使用
beforeRouteEnter等组件内守卫。
8. 描述一下 Nuxt.js 中 nuxt-link 组件的作用以及它与原生 a 标签的区别。
答： nuxt-link 是 Vue Router 的 router-link 的封装，用于应用内部的页面导航。区别在于：它会智能地预加载链接页面的资源（在视口中时），实现更快的页面切换，而原生 a 标签会导致整个页面重新加载。
三、状态管理与配置
9. Nuxt.js 如何集成 Vuex？它是如何简化 Vuex 使用的？
答： Nuxt.js 内置了 Vuex 并进行了简化。只需在 store/ 目录下创建文件即可自动激活Vuex。它支持两种模式：
- 模块模式：
store/目录下的每个.js文件都会被转换为一个Vuex模块（index.js是根模块）。 - 经典模式 (Nuxt 2)： 需要手动创建
index.js并返回一个Vuex.Store实例。
10. 什么是 Nuxt 插件 (Plugins)？它的常见使用场景有哪些？
答： 插件是用于在Nuxt应用启动前运行JavaScript的函数。常见场景：
- 注册全局组件。
- 注入全局的工具函数或常量（如
$myInjectedFunction）。 - 添加第三方库的Vue插件（如
vue-notifications）。 - 设置外部JS库（如Google Analytics）。
11. 如何修改 Nuxt.js 应用的默认配置？例如，添加一个全局的 SASS 变量文件。
答： 通过项目根目录下的 nuxt.config.js (或 nuxt.config.ts) 文件进行配置。例如，要添加全局SASS文件，可以在 css 数组中引入，或使用 build 配置下的 loaders 进行更深入的集成。
四、性能优化与部署
12. Nuxt.js 有哪些内置的性能优化手段？
答：
- 自动代码分割： 为每个页面生成特定的JavaScript文件。
- 智能预加载：
nuxt-link会自动预加载链接页面的资源。 - 服务端渲染： 提升首屏加载速度和SEO。
- 静态化 (SSG)： 生成纯静态HTML，性能最佳。
13. 解释一下 client-only 和 server-only 组件的作用。
答：
<client-only>: 用于包裹只能在客户端渲染的组件（如依赖window或document的第三方库），防止服务端渲染时出错。<server-only>(Nuxt 3): 用于包裹只能在服务端运行的代码，这些代码会在客户端构建包中被移除，减小 bundle 体积。
14. 部署一个 Universal 模式的 Nuxt.js 应用和部署一个 Static 模式的应用有何不同？
答：
- Universal (SSR)： 需要一個Node.js服务器环境来运行Nuxt服务，例如部署到Heroku, DigitalOcean, 或使用PM2管理。
- Static (SSG)： 无需Node服务器。只需将
nuxt generate命令生成的dist/目录部署到任何静态托管平台即可，如Netlify, Vercel, GitHub Pages。
五、进阶与原理
15. 什么是 Nuxt 模块 (Modules)？它和插件 (Plugins) 有什么区别？
答： Nuxt模块是函数，用于扩展Nuxt的核心功能并在构建生命周期中执行任务。它们通常在 nuxt.config.js 中配置。区别在于：模块用于扩展构建过程和Nuxt核心，而插件用于扩展Vue应用实例和运行时。
16. Nuxt 3 是一个全新的重写版本，它最主要的新特性是什么？
答：
- 基于 Vite： 更快的开发服务器和构建工具。
- 基于 Nitro： 一个新的服务端引擎，支持跨平台部署，并具有极小的输出大小。
- Composition API 优先： 提供了
useFetch,useAsyncData等新的Composables。 - 更轻量： 通过 tree-shaking 显著减小了应用体积。
17. 在服务端渲染 (SSR) 过程中，如何判断代码当前是在服务器上运行还是在客户端上运行？
答： 可以通过检查 process.server 和 process.client 这两个布尔值变量来判断执行环境。
18. 如何处理 Nuxt.js 应用中的 SEO 和 Meta 标签？
答： 在每个页面组件中使用 head() 方法 (Nuxt 2) 或 useHead composable (Nuxt 3) 来动态设置当前页面的 <title> 和 <meta> 标签等SEO相关信息。
19. 在 Nuxt 3 中，navigateTo 函数的作用是什么？
答： 它是用于程序化导航的工具函数，是Nuxt 3中替代 router.push() 的推荐方法。它可以在组件、插件或路由中间件中使用。
20. 你如何调试一个在服务端渲染时出现，但在客户端不出现的错误？
答：
- 检查Node.js服务器的控制台日志，因为SSR的错误会在这里输出。
- 确保代码是“通用”的，避免在服务端执行时访问仅限客户端的API（如
window,document）。 - 使用
console.log并观察服务器终端输出。 - 使用VSCode等编辑器的调试功能附加到Node.js进程进行断点调试。
