Nuxt 打包部署指南
Nuxt 是基于 Vue 的服务端渲染框架,其部署策略主要取决于你选择的运行模式:Universal (SSR)、SPA 或 Static Site Generation (SSG)。不同模式下的构建产物和启动命令差异较大,选错会导致服务无法启动或资源浪费。下面结合实际场景梳理一下具体流程。
1. 常见模式与构建策略
SSR(Universal 模式)
适合对 SEO 要求较高、动态内容较多的项目。这类应用需要运行在 Node.js 环境中,通常搭配 PM2 或 Docker 进行进程管理。
构建与启动流程如下:
# 安装依赖
npm install
# 打包构建
npm run build
# 使用 pm2 启动服务
pm2 start .output/server/index.mjs --name nuxt-app
生产环境直接运行启动脚本即可:
npm run start
SPA(单页应用)
如果你的项目不需要服务端渲染,仅需客户端交互,可以选择此模式。
- 输出目录:Nuxt 3 为
.output/public,Nuxt 2 为dist。 - 部署方式:将静态文件上传至任意 Web 服务器(如 Nginx、Netlify、Vercel 或 GitHub Pages)。
构建命令不变,但需在配置中关闭 SSR:
export default defineNuxtConfig({
ssr: false
})
SSG(静态站点生成)
适用于内容相对固定且对 SEO 有强需求的项目。
- 输出目录:
dist/ - 部署方式:直接托管
dist/目录到静态服务器。
构建命令调整为 generate:
npm run generate
配置示例:
export default defineNuxtConfig({
ssr: true,
target: 'static'
})
2. Nuxt 3 构建产物说明
Nuxt 3 基于 Vite 构建,输出结构有所变化。构建完成后,重点关注 .output 目录:
.output/public:存放静态资源(CSS、JS、图片等)。.output/server:存放服务端运行代码。


