Nuxt.js 面试真题

一、Nuxt.js 基础真题

1. Nuxt.js 是什么？有什么特点？

参考答案：

Nuxt.js 是基于 Vue.js 的全栈框架，支持 SSR、SSG、CSR 等渲染模式。

特点：

• 服务端渲染 (SSR)：提升首屏加载速度和 SEO
• 静态站点生成 (SSG)：构建时预渲染静态页面
• 自动代码分割：自动路由分割
• 文件系统路由：基于文件结构的路由系统
• 模块系统：丰富的模块生态
• Vue 3 支持：使用 Composition API

2. Nuxt.js 的目录结构？

参考答案：

nuxt-app/
├── assets/          # 未编译的资源
├── components/     # Vue 组件
├── composables/    # 组合式函数
├── layouts/        # 布局
├── middleware/     # 中间件
├── pages/         # 页面（自动路由）
├── plugins/        # 插件
├── public/         # 静态资源
├── server/         # API 路由
├── app.vue         # 应用入口
└── nuxt.config.ts  # 配置文件

3. Nuxt.js 的数据获取方式？

参考答案：

// useFetch
const { data, pending, error } = awaituseFetch('/api/users', {
baseURL: 'https://api.example.com',
query: { page: 1 }
});

// useAsyncData
const { data } = awaituseAsyncData('users', () =>
    $fetch('/api/users')
);

// 客户端获取
const { data } = awaituseFetch('/api/data', {
server: false
});

4. Nuxt.js 的渲染模式？

参考答案：

// nuxt.config.ts
exportdefaultdefineNuxtConfig({
// SSR
ssr: true,

// SSG
ssr: true,
nitro: {
prerender: {
routes: ['/about', '/contact']
        }
    },

// SPA
ssr: false
})

5. Nuxt.js 的路由系统？

参考答案：

<!-- pages/index.vue -->
<template>
    <div>首页</div>
</template>

<!-- pages/users/[id].vue -->
<template>
    <div>用户ID: {{ $route.params.id }}</div>
</template>

<script setup>
const route = useRoute()
console.log(route.params.id)
</script>

二、Nuxt.js 进阶真题

6. Nuxt.js 的状态管理？

参考答案：

// useState
constuseCounter = () => {
returnuseState('counter', () =>0)
}

// Pinia
// stores/user.ts
import { defineStore } from'pinia'

exportconst useUserStore = defineStore('user', {
state: () => ({
name: '',
age: 0
    }),
getters: {
isAdult: (state) => state.age >= 18
    },
actions: {
setUser(user) {
this.name = user.name
this.age = user.age
        }
    }
})

7. Nuxt.js 的中间件？

参考答案：

// middleware/auth.ts
exportdefaultdefineNuxtRouteMiddleware((to, from) => {
const user = useUserStore()

if (!user.isLoggedIn && to.path !== '/login') {
returnnavigateTo('/login')
    }
})

// 页面使用
<script setup>
definePageMeta({
middleware: ['auth']
})
</script>

8. Nuxt.js 的 SEO 优化？

参考答案：

<script setup>
useHead({
    title: '页面标题',
    meta: [
        { name: 'description', content: '页面描述' },
        { name: 'keywords', content: '关键词' }
    ]
})

useSeoMeta({
    title: '页面标题',
    ogTitle: 'OG标题',
    description: '页面描述',
    ogDescription: 'OG描述',
    ogImage: '/image.jpg'
})
</script>

9. Nuxt.js 3 的新特性？

参考答案：

1. Nitro 引擎：更快的构建和部署
2. Vue 3 支持：Composition API
3. Vite：更快的开发体验
4. 自动导入：无需手动导入
5. 实验性功能：SSR 流、混合渲染

// 自动导入
// 不需要 import，直接使用
const { data } = awaituseFetch('/api/test')

10. Nuxt.js 和 Next.js 的区别？

参考答案：

11. Nuxt.js 状态管理？

参考答案：

// useState (Nuxt 3)
constuseCounter = () => useState('counter', () =>0)

// Pinia
// stores/user.ts
import { defineStore } from'pinia'

exportconst useUserStore = defineStore('user', {
state: () => ({
user: nullasUser | null
    }),
actions: {
asyncfetchUser() {
this.user = await $fetch('/api/user')
        }
    }
})

12. Nuxt.js 插件？

参考答案：

// plugins/auth.ts
exportdefaultdefineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('hello', (msg: string) =>`Hello ${msg}`)

    nuxtApp.vueApp.directive('focus', {
inserted(el) {
            el.focus()
        }
    })
})

// 使用
const { $hello } = useNuxtApp()
$hello('World')

13. Nuxt.js 中间件？

参考答案：

// middleware/auth.ts
exportdefaultdefineNuxtRouteMiddleware((to, from) => {
const user = useUserStore()

if (!user.isLoggedIn && to.path !== '/login') {
returnnavigateTo('/login')
    }
})

// 页面使用
definePageMeta({
middleware: ['auth']
})

14. Nuxt.js 部署？

参考答案：

# 构建
npm run build

# 预览
npm run preview

# 静态生成
npm run generate

部署平台：

• Vercel
• Netlify
• Docker
• Node.js 服务器

15. Nuxt.js 模块？

参考答案：

// nuxt.config.ts
exportdefaultdefineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
'@nuxtjs/supabase',
'@nuxt/image'
    ]
})

常用模块：

• @nuxtjs/tailwindcss
• @nuxt/image
• @pinia/nuxt
• @nuxtjs/supabase

16. Nuxt.js useFetch？

参考答案：

// 基础用法
const { data, pending, error, refresh } = awaituseFetch('/api/users')

// 带参数
const { data } = awaituseFetch('/api/users', {
query: { page: 1, limit: 10 },
headers: { Authorization: 'Bearer token' }
})

// 懒加载
const { data } = awaituseFetch('/api/data', {
lazy: true
})

17. Nuxt.js SEO？

参考答案：

<script setup>
useSeoMeta({
    title: '页面标题',
    ogTitle: 'OG标题',
    description: '页面描述',
    ogDescription: 'OG描述',
    ogImage: '/image.jpg',
    twitterCard: 'summary'
})
</script>

18. Nuxt.js 错误处理？

参考答案：

// error.vue
<template>
<div>
<h1>{{ error.statusCode }}</h1>
<p>{{ error.message }}</p>
<button @click="handleError">返回首页</button>
</div>
</template>

<scriptsetup>
const props = defineProps({
error: Object
})

consthandleError = () => clearError({ redirect: '/' })
</script>

19. Nuxt.js 生命周期？

参考答案：

• nuxtApp：useNuxtApp() 访问
• Plugin：defineNuxtPlugin
• Middleware：defineNuxtRouteMiddleware
• Component：setup() 中使用
• Page：useRoute, useRouter

20. Nuxt.js 配置？

参考答案：

// nuxt.config.ts
exportdefaultdefineNuxtConfig({
devtools: { enabled: true },

modules: ['@nuxtjs/tailwindcss'],

runtimeConfig: {
apiSecret: '123',
public: {
apiBase: '/api'
        }
    },

app: {
head: {
title: 'My App',
meta: [{ name: 'description', content: 'My App' }]
        }
    }
})

📌 面试重点：渲染模式、路由系统、数据获取、SEO 优化是高频考点。