Nuxt4 部署上线
最后一篇，把构建产物、部署方式和上线检查讲清楚。学完这篇，你的 Nuxt 项目就能真正跑上线。
配置相关的内容（nuxt.config、app.config、runtimeConfig 的区别，以及 SSG 预渲染）已经在 网站配置 和 SSG 静态生成 两篇讲完，本篇只聚焦「怎么把代码变成可访问的站点」。
构建产物
Nuxt 有两种打包模式，决定了部署方式：
| 模式 | 命令 | 产物 | 适合 |
|---|---|---|---|
| 服务端渲染 | npm run build |
Node.js 服务端应用（.output/） |
动态网站，数据实时 |
| 静态生成 | npm run generate |
纯静态 HTML（.output/public/） |
博客、官网，内容变化少 |
静态生成模式在构建时预渲染所有页面，部署到 CDN 即可，成本低速度快。
部署方式
方式一，部署到 Node 服务器
适合 SSR 模式，需要一台能跑 Node.js 的服务器（如云服务器）：
# 本地或 CI 构建
npm run build
# 把 .output/ 目录上传到服务器
# 服务器上启动
node .output/server/index.mjs长期运行建议用 pm2 守护进程：
npm install -g pm2
pm2 start .output/server/index.mjs --name my-nuxt-app常用运维命令：pm2 logs 看日志，pm2 restart my-nuxt-app 重启。
方式二，部署到平台（Vercel 等）
Vercel、Netlify、Cloudflare Pages 都原生支持 Nuxt，把代码推到 Git 仓库，在平台导入项目即可，平台自动构建部署。这是目前最省心的方式，免费额度对小项目够用。
静态生成模式（npm run generate）的产物可以部署到任意静态托管，如 GitHub Pages、对象存储加 CDN。
方式三，关闭 SSR 部署
如果完全不需要 SEO 且必须部署到纯静态空间，可以 ssr: false 后 npm run generate，产物是 SPA 模式。会失去 SSR 的 SEO 优势，尽量不用。
上线前检查清单
| 检查项 | 说明 |
|---|---|
| 类型检查 | npm run typecheck，没有类型错误 |
| 生产构建 | npm run build 或 npm run generate 能成功 |
| 本地预览 | npm run preview 预览生产产物，验证构建结果 |
| 环境变量 | 确认线上环境变量已配置，本地 .env 未提交 |
| 错误页面 | 确认 error.vue 能正常显示，见错误处理 |
| 元信息 | 确认页面标题和描述，见SEO 篇 |
系列总结
到这里，Nuxt 4 教程就结束了。整套学习路线分成四个阶段，循序渐进：
- 基础认知与搭建
- 网站配置与扩展
- 请求、状态与存储
- 数据获取 → 数据获取进阶 → 状态管理 → Cookie 与客户端存储
- 后端与上线
- 界面组件库（进阶）
- Nuxt UI 入门与安装 → 按钮 UButton → 表单与输入 → 卡片与容器 → 弹窗与浮层 → Toast 与通知 → 数据表格 UTable → 下拉菜单与命令面板 → 主题与暗色模式 → 图标 Icon
恭喜你完成了整个课程。接下来建议动手做一个完整的小项目（比如个人博客或工具站），把学到的知识串起来。遇到问题优先查阅 Nuxt 官方文档，它是最好的参考书。