Nuxt4 全景概览与技术选型

// Vue 2: Options API — 按选项组织代码
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}
 
// Vue 3: Composition API — 按逻辑关注点组织代码
import { ref, computed } from 'vue'
 
export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    const increment = () => count.value++
    return { count, doubled, increment }
  }
}
 
// Vue 3.5+: <script setup> — 更简洁的语法糖
// <script setup lang="ts">
// const count = ref(0)
// const doubled = computed(() => count.value * 2)
// const increment = () => count.value++
// </script>

// ❌ 传统 Vue 项目：手动导入一切
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useHead } from '@unhead/vue'
import AppHeader from '@/components/AppHeader.vue'
import { useAuth } from '@/composables/useAuth'
 
// ✅ Nuxt4：自动导入，直接使用
// 以下所有 API 都无需 import 语句
const count = ref(0)                    // Vue API 自动导入
const router = useRouter()              // Vue Router 自动导入
useHead({ title: 'AI 视频平台' })       // Unhead 自动导入
const { user } = useAuth()             // 自定义 Composable 自动导入
// <AppHeader /> 也无需导入，组件自动注册

// server/api/videos/[id].get.ts — 后端 API
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  const video = await db.query.videos.findFirst({
    where: eq(videos.id, id)
  })
  if (!video) throw createError({ statusCode: 404, message: '视频不存在' })
  return video  // 返回值的类型会自动推导到前端
})
 
// app/pages/videos/[id].vue — 前端页面
// <script setup lang="ts">
// const route = useRoute()
// const { data: video } = await useFetch(`/api/videos/${route.params.id}`)
// // video 的类型自动推导为后端返回的类型，无需手动定义 interface
// </script>

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':              { prerender: true },          // SSG — 首页静态预渲染
    '/videos':        { swr: 3600 },                // ISR — 视频列表每小时重新验证
    '/videos/**':     { ssr: true },                // SSR — 视频详情页服务端渲染（SEO）
    '/studio/**':     { ssr: false },               // CSR — 创作工作台纯客户端渲染
    '/api/**':        { cors: true, headers: { 'cache-control': 's-maxage=0' } },
    '/admin/**':      { ssr: false, robots: false }, // CSR — 管理后台，不被搜索引擎索引
  }
})

// nuxt.config.ts 中定义
export default defineNuxtConfig({
  runtimeConfig: {
    aiApiKey: '',              // 仅服务端可用
    public: {
      appName: 'AI 视频平台',  // 客户端也可用
      apiBase: '/api',
    }
  }
})
 
// 使用时类型自动推导
const config = useRuntimeConfig()
config.aiApiKey        // ✅ string（仅在 server/ 目录下可用）
config.public.appName  // ✅ string
config.public.nonExist // ❌ TypeScript 报错：Property 'nonExist' does not exist

// app/composables/useAPI.ts
export const useAPI = createUseFetch('/api', {
  headers: {
    'X-App-Version': '1.0.0',
  },
  onRequest({ options }) {
    // 自动注入 Token
    const token = useCookie('auth-token')
    if (token.value) {
      options.headers.set('Authorization', `Bearer ${token.value}`)
    }
  },
  onResponseError({ response }) {
    // 统一错误处理
    if (response.status === 401) {
      navigateTo('/login')
    }
  }
})
 
// 使用时 — 返回值类型自动推导
// const { data: videos } = await useAPI('/videos', { query: { page: 1 } })

// nuxt.config.ts（在 Nuxt 3.x 中）
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,  // 提前启用 Nuxt4 行为
  }
})

// Nuxt4 — useFetch 自动处理 SSR/CSR
// app/pages/videos.vue
// <script setup lang="ts">
// const { data: videos, status } = await useFetch('/api/videos')
// </script>

// Next.js 15 — Server Component 直接 fetch
// app/videos/page.tsx
// async function VideosPage() {
//   const videos = await fetch('http://localhost:3000/api/videos')
//     .then(r => r.json())
//   return <VideoList videos={videos} />
// }

// Remix — loader 函数
// app/routes/videos.tsx
// export async function loader() {
//   const videos = await db.query.videos.findMany()
//   return json({ videos })
// }
// export default function Videos() {
//   const { videos } = useLoaderData<typeof loader>()
//   return <VideoList videos={videos} />
// }

.output/
├── server/            # 服务端产物
│   ├── index.mjs      # Nitro 入口
│   ├── chunks/        # 服务端代码分割
│   └── node_modules/  # 服务端依赖
├── public/            # 静态资源
│   ├── _nuxt/         # 客户端 JS/CSS Bundle
│   └── favicon.ico    # 静态文件
└── nitro.json         # Nitro 配置