---
title: "部署项目"
description: "了解如何将您的 Nuxt 应用程序部署到任何托管服务提供商。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/getting-started/deployment"
---
# 部署项目

> 了解如何将您的 Nuxt 应用程序部署到任何托管服务提供商。

Nuxt 应用程序可以部署在 Node.js 服务器上，预渲染为静态托管，或部署到无服务器或边缘 (CDN) 环境中。

::tip
如果您正在寻找支持 Nuxt 的云服务提供商列表，请参阅[托管服务提供商](https://nuxt.zhcndoc.com/deploy)章节。
::

## Node.js 服务器

使用 Nitro 的 Node.js 服务器预设以便部署到任何 Node 主机。

- **默认输出格式**（如果没有指定或自动检测）<br>
- 仅加载渲染请求所需的代码块，以优化冷启动时间<br>
- 适用于将 Nuxt 应用部署到任何 Node.js 主机

### 入口点

运行带有 Node 服务器预设的 `nuxt build` 后，结果将是一个可启动的 Node 服务器入口点。

```bash [Terminal]
NODE_ENV=production node .output/server/index.mjs
```

这将启动您的生产 Nuxt 服务器，默认监听 3000 端口。

::important
运行服务器时请设置 `NODE_ENV=production`。某些依赖项（尤其是 Vue Router）只有在设置此项时才会去除仅开发环境的警告，因此如果不设置，您的日志可能会被诸如 `[Vue Router warn]: No match found for location with path …` 之类的消息淹没，尤其是在未匹配的路由上。
::

它会遵循以下运行时环境变量：

- `NITRO_PORT` 或 `PORT`（默认值为 `3000`）
- `NITRO_HOST` 或 `HOST`（默认值为 `'0.0.0.0'`）
- `NITRO_SSL_CERT` 和 `NITRO_SSL_KEY` — 当二者都存在时，将以 HTTPS 模式启动服务器。在绝大多数情况下，这不应被用于生产环境，仅用于测试，并且 Nitro 服务器应运行在如 nginx 或 Cloudflare 这样的反向代理后面以终止 SSL。

### PM2

[PM2](https://pm2.keymetrics.io/)（进程管理器 2）是一个快速且便捷的解决方案，用于在您的服务器或虚拟机上托管 Nuxt 应用。

要使用 `pm2`，请使用 `ecosystem.config.cjs` 文件：

```ts [ecosystem.config.cjs]
module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs',
      env: {
        NODE_ENV: 'production',
      },
    },
  ],
}
```

### 集群模式

您可以使用 `NITRO_PRESET=node_cluster` 来利用 Node.js 的 [cluster](https://node.zhcndoc.com/dist/latest/docs/api/cluster.html) 模块实现多进程性能。

默认情况下，工作负载会使用轮询（round robin）策略分配给各工作进程。

### 了解更多

::read-more{to="https://nitro.build/deploy/runtimes/node" title="Nitro 文档中 node-server 预设的相关内容"}
::

::video-accordion{title="观看 Daniel Roe 关于该主题的简短视频" videoId="0x1H6K5yOfs"}
::

## 静态托管

有两种方式可以将 Nuxt 应用部署到任意静态托管服务：

- 使用 `ssr: true` 进行静态站点生成（SSG），在构建时预渲染应用的路由。（这是运行 `nuxt generate` 时的默认行为。）它还会生成 `/200.html` 和 `/404.html` 单页应用回退页面，这些页面可以在客户端渲染动态路由或 404 错误（不过您可能需要在静态主机上进行配置）。
- 或者，您可以使用 `ssr: false` 预渲染您的站点（静态单页应用）。这会生成 HTML 页面，其中包含一个空的 `<div id="__nuxt"></div>`，而您的 Vue 应用通常会在此处渲染。您将失去预渲染站点带来的许多 SEO 优势，因此建议改用 [`<ClientOnly>`](https://nuxt.zhcndoc.com/docs/3.x/api/components/client-only) 包裹站点中无法进行服务器端渲染的部分（如果有）。

::read-more{title="Nuxt 预渲染" to="https://nuxt.zhcndoc.com/docs/3.x/getting-started/prerendering"}
::

### 仅客户端渲染

如果您不想预渲染路由，另一种静态托管的方式是在 `nuxt.config` 文件中将 `ssr` 属性设置为 `false`。此时执行 `nuxt generate` 命令，会生成 `.output/public/index.html` 入口文件及 JavaScript 包，就像传统的客户端 Vue.js 应用一样。

```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
  ssr: false,
})
```

## 托管服务提供商

Nuxt 可以以最少配置部署到多个云服务提供商：

::read-more{to="https://nuxt.zhcndoc.com/deploy"}
::

## 预设

除了 Node.js 服务器和静态托管服务外，Nuxt 项目可以通过多个经过充分测试的预设以最少配置进行部署。

您可以在 [`nuxt.config.ts`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/nuxt-config) 文件中显式设置所需的预设：

```ts twoslash [nuxt.config.ts]
// @errors: 2353
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server',
  },
})
```

…或者在运行 `nuxt build` 时使用 `NITRO_PRESET` 环境变量：

```bash [Terminal]
NITRO_PRESET=node-server nuxt build
```

🔎 查看 [Nitro 部署](https://nitro.zhcndoc.com/deploy) 了解所有可能的部署预设及支持的服务提供商。

## CDN 代理

在大多数情况下，Nuxt 可以与非 Nuxt 生成或创建的第三方内容一起使用。但有时这些内容可能导致问题，特别是 Cloudflare 的“压缩和安全选项”。

因此，请确保在 Cloudflare 中取消勾选/禁用以下选项。否则，不必要的重新渲染或水合错误可能影响您的生产应用。

1. 速度 > 设置 > 内容优化 > 禁用 "Rocket Loader™"
2. 安全 > 设置 > 禁用 "Email Address Obfuscation"

通过这些设置，您可以确保 Cloudflare 不会向您的 Nuxt 应用注入可能引起不良副作用的脚本。

::tip
这些选项在 Cloudflare 仪表盘中的位置有时会变动，请随时查找。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.