Nuxt 3 静态站点生成完全指南

静态站点生成（SSG）是现代 Web 开发的重要趋势，Nuxt 3 提供了强大的 SSG 支持。

什么是 SSG？

SSG 在构建时预渲染所有页面为静态 HTML 文件，具有以下优势：

• 极快的加载速度：无需服务器渲染
• 更好的 SEO：搜索引擎可以直接抓取 HTML
• 低成本部署：可以部署到任何静态文件服务器
• 高安全性：没有服务器端攻击面

配置 Nuxt 3 SSG

在 nuxt.config.ts 中配置：

export default defineNuxtConfig({
  ssr: true,
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/']
    }
  }
})

生成静态站点

运行以下命令：

# 生成静态文件
pnpm generate

# 预览生成的站点
pnpm preview

生成的文件位于 .output/public 目录。

动态路由处理

对于动态路由，需要告诉 Nuxt 要生成哪些页面：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/blog/article-1',
        '/blog/article-2',
        '/blog/article-3'
      ]
    }
  }
})

或者使用 crawlLinks: true 让 Nuxt 自动发现链接。

性能优化技巧

1. 图片优化

使用 @nuxt/image 模块：

<NuxtImg 
  src="/images/hero.jpg" 
  loading="lazy"
  format="webp"
  quality="80"
/>

2. 代码分割

// 懒加载组件
const HeavyComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)

3. 预加载关键资源

app.head.link.push({
  rel: 'preload',
  as: 'font',
  href: '/fonts/custom.woff2'
})

部署选项

SSG 站点可以部署到：

总结

Nuxt 3 的 SSG 功能强大且易用，非常适合构建博客、文档站点和营销页面。

延伸阅读：

• Nuxt 3 部署文档
• Web 性能优化指南