【前端】Nuxt打包部署的几种方式

一、总结知识点

Nuxt 是基于 Vue 的服务端渲染框架，部署方式主要取决于你使用的 Nuxt 模式：Universal (SSR)、SPA 或 Static Site Generation (SSG)。不同模式下的打包部署流程略有不同。以下将分别介绍 Nuxt 应用的打包和部署方式。

---

二、详细说明

1. Nuxt 常见模式及打包方式

（1）SSR（Universal 模式）

• 适合：SEO 要求较高、动态内容较多的项目。

• 打包命令：

  npm run build
  

• 启动命令：

  npm run start
  

• 部署要求：需要支持 Node.js 的服务器（如 pm2、Docker、VPS）。

• 部署流程：

  # 安装依赖
  npm install
  
  # 打包构建
  npm run build
  
  # 使用 pm2 启动服务
  pm2 start .output/server/index.mjs --name nuxt-app
  

---

（2）SPA（单页应用）

• 适合：不需要 SSR，只需客户端渲染的项目。
• 配置修改：

  export default defineNuxtConfig({
    ssr: false
  })
  

• 打包命令：

  npm run build
  

• 输出目录：.output/public（Nuxt 3）或 dist（Nuxt 2）
• 部署方式：将打包后的静态文件部署到任意静态服务器（如 Nginx、Netlify、Vercel、GitHub Pages）。

---

（3）SSG（静态站点生成）

• 适合：内容基本固定，SEO 要求高。
• 配置示例：

  export default defineNuxtConfig({
    ssr: true,
    target: 'static'
  })
  

• 打包命令：

  npm run generate
  

• 输出目录：dist/
• 部署方式：部署 dist/ 到静态服务器。

---

2. Nuxt 3 打包区别（特别说明）

Nuxt 3 使用 Vite 构建系统，打包后输出目录为 .output/，其中：

• .output/public：静态资源
• .output/server：服务端运行代码
• .output/server/index.mjs：Nuxt 3 启动入口

---

3. 常用部署方式简要

模式	启动方式	适合平台
SSR	node/pm2	VPS, Docker, 云函数
SPA	静态资源托管	Netlify, GitHub Pages, OSS
SSG	静态资源托管	Netlify, Vercel, OSS 等

---

三、小结

• 若你使用的是 SSR 模式：用 npm run build 构建后，再通过 Node 启动服务。
• 若你使用的是 SPA/SSG 模式：使用 npm run generate 生成静态文件，部署至任意静态服务器即可。
• Nuxt 3 打包输出目录变为 .output，需注意启动方式和文件结构变化。