Nuxt DevTools 调试体系

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    enabled: true,   // 开发环境启用
    timeline: {
      enabled: true, // 启用时间线追踪
    },
  },
})

// app/stores/video.ts
export const useVideoStore = defineStore('video', () => {
  const videos = ref<Video[]>([])
  const selectedVideo = ref<Video | null>(null)
  const isLoading = ref(false)
 
  async function fetchVideos() {
    isLoading.value = true
    videos.value = await $fetch('/api/videos')
    isLoading.value = false
  }
 
  return { videos, selectedVideo, isLoading, fetchVideos }
})

// 在 composable 中创建的状态
const user = useState<User | null>('auth:user', () => null)
const theme = useState<'light' | 'dark'>('app:theme', () => 'light')

// server/api/videos/index.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  console.log('[API] GET /api/videos', query)  // DevTools Terminal 可见
 
  const videos = await db.query.videos.findMany()
  console.log(`[API] Found ${videos.length} videos`)
 
  return { items: videos, total: videos.length }
})

# 启动 Nuxt 开发服务器并启用调试
node --inspect node_modules/.bin/nuxi dev

// .vscode/launch.json
{
  "configurations": [
    {
      "name": "Nuxt Dev Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/nuxi",
      "args": ["dev"],
      "cwd": "${workspaceFolder}"
    }
  ]
}

// server/api/cache/test.get.ts
export default defineEventHandler(async () => {
  const storage = useStorage('redis')
 
  // 写入缓存
  await storage.setItem('video:123:views', 42)
 
  // 读取缓存
  const views = await storage.getItem('video:123:views')
 
  return { views }
})

// modules/devtools.ts
import { defineNuxtModule } from '@nuxt/kit'
 
export default defineNuxtModule({
  meta: { name: 'ai-video-devtools' },
  setup(options, nuxt) {
    if (!nuxt.options.dev) return
 
    nuxt.hook('devtools:customTabs', (tabs) => {
      tabs.push({
        name: 'ai-video',
        title: 'AI Video',
        icon: 'i-ph-video-camera',
        view: {
          type: 'iframe',
          src: '/__devtools/ai-video',
        },
      })
    })
  },
})

# 分析客户端 Bundle
pnpm nuxt analyze

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            // 大型第三方库单独分包
            'hls-player': ['hls.js'],
            'echarts': ['echarts'],
          },
        },
      },
    },
  },
})

# 安装
pnpm add -D @lhci/cli
 
# 运行
pnpm lhci autorun

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'pnpm preview',
      url: ['http://localhost:3000/', 'http://localhost:3000/videos'],
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.9 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
}

// server/plugins/performance.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook('request', (event) => {
    event.context.startTime = performance.now()
  })
 
  nitro.hooks.hook('afterResponse', (event) => {
    const duration = performance.now() - event.context.startTime
    const path = getRequestURL(event).pathname
 
    // 记录慢请求
    if (duration > 1000) {
      console.warn(`[SLOW] ${path} took ${duration.toFixed(0)}ms`)
    }
 
    // 上报到监控平台
    // await reportMetric('api_response_time', duration, { path })
  })
})

// app/plugins/web-vitals.client.ts
import { onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals'
 
export default defineNuxtPlugin(() => {
  function reportMetric(metric: { name: string; value: number }) {
    // 上报到监控平台（如 Sentry、自建服务）
    $fetch('/api/metrics', {
      method: 'POST',
      body: {
        name: metric.name,
        value: metric.value,
        url: window.location.href,
        timestamp: Date.now(),
      },
    })
  }
 
  onCLS(reportMetric)   // 累积布局偏移
  onFCP(reportMetric)   // 首次内容绘制
  onINP(reportMetric)   // 交互到下一次绘制
  onLCP(reportMetric)   // 最大内容绘制
  onTTFB(reportMetric)  // 首字节时间
})