nuxt项目部署

部署 Nuxt 项目是其作为“全栈框架”展现威力的时刻。由于 Nuxt 4 底层使用Nitro引擎，它的部署非常灵活：你可以把它部署成一个需要 Node.js 环境的**SSR（服务端渲染）**应用，也可以将其完全静态化导出。

在部署前，你得先决定你的项目怎么运行：

模式	命令	产物	适用场景
SSR (服务端渲染)	npm run build	.output/ (Node.js 运行)	动态内容多、SEO 要求极高、有后端 API 逻辑。
SSG (静态生成)	npm run generate	dist/ (纯静态文件)	博客、文档、内容不常变动的官网。可以托管在任何 CDN。

SSR模式部署

这是最能发挥 Nuxt 后端接口（server/api）能力的模式。

1. 构建

npm run build

执行完后，你会得到一个.output文件夹。这个文件夹是独立的，它包含了运行应用所需的所有代码（包括 Nitro 引擎和依赖），你甚至不需要在服务器上重新npm install。

1. 启动服务

将.output文件夹上传到服务器，执行：

# 使用 Node 运行入口文件
node .output/server/index.mjs

1. 使用 PM2 进行进程管理

在生产环境中，直接用node命令不安全（挂了不会自动重启）。建议使用PM2：

# ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'MyNuxtApp',
      port: '3000',
      exec_mode: 'cluster', // 开启集群模式，利用多核 CPU
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

启动：pm2 start ecosystem.config.js

nginx配置

通常我们不会把 3000 端口直接暴露给用户，而是用 Nginx 做一层转发：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000; # 转发到 Nuxt 运行端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

服务器配置

服务器上需要安装node环境

装好node之后还需要装一下pm2，pm2是node的项目管理工具

如果你的服务器是centos7的，大概率高版本的node你是装不上的

如果有条件的话，升级内核版本或者换操作系统

不方便换的话，使用docker也行

docker pull node:24-slim

docker run -itd --name node -v /opt/nuxt-study/:/app -p 3000:3000 node:24-slim   bash
docker run -itd --name node -v /opt/nuxt-study/:/app  -p 3000:3000 node:24-slim  node /app/.output/server/index.mjs

使用docker的话，就不用装pm2了，以后更新的话，重启一下容器就好

SSG模式部署

在 SSG 模式下，Nuxt 会在构建时访问所有路由，并将其转换为纯 HTML、CSS 和 JS 文件。

这意味着你不需要 Node.js 运行时，和之前部署前端项目一样

npm run generate

发生了什么？

1. 预渲染 (Prerendering)：Nuxt 会启动一个临时的 Nitro 服务，爬取你项目中的所有路由。
2. 生成文件：它会将每个页面生成对应的.html 文件，并将资源（JS/CSS）放入特定的目录。
3. 产物位置：生成的静态文件全部存放在项目根目录下的.output/public文件夹中（在某些旧版本或配置下也可能指向dist/，但 Nuxt 4/Nitro 统一建议查看.output/public）。

如果项目里面有动态路由，就不要用ssg部署了，用ssr部署

部署方式

nginx部署

你只需要把.output/public文件夹里的所有内容上传到服务器的某个目录（例如/var/www/my-nuxt-site），然后配置 Nginx。

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/my-nuxt-site; # 你存放静态文件的路径
    index index.html;

    location / {
        # 核心配置：尝试寻找文件，如果找不到则返回 404
        # 或者是单页面应用(SPA)模式下指向 index.html
        try_files $uri $uri/ /index.html;
    }

    # 可选：设置静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

使用docker部署

# 假设你的项目在 /opt/nuxt-study
docker run -itd --name nuxt-ssg -p 80:80 -v /opt/nuxt-study/.output/public:/usr/share/nginx/html nginx:alpine