Lzh on GitHub

部署

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

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

如果您正在寻找支持 Nuxt 的云提供商列表，请参阅 托管提供商 部分。

Node.js 服务器

探索带有 Nitro 的 Node.js 服务器预设，以便部署到任何 Node 托管。

  • 如果未指定或自动检测到，则为 默认输出格式
  • 仅加载渲染请求所需的 chunk，以实现最佳冷启动时间
  • 适用于将 Nuxt 应用程序部署到任何 Node.js 托管

入口点

当使用 Node 服务器预设运行 nuxt build 时，结果将是一个启动随时可运行的 Node 服务器的入口点。

Terminal
node .output/server/index.mjs

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

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

  • NITRO_PORT 或 PORT（默认为 3000）
  • NITRO_HOST 或 HOST（默认为 '0.0.0.0'）
  • NITRO_SSL_CERT 和 NITRO_SSL_KEY - 如果两者都存在，这将以 HTTPS 模式启动服务器。在绝大多数情况下，除了测试之外，不应使用此功能，并且 Nitro 服务器应在反向代理（如 nginx 或 Cloudflare）之后运行，该代理终止 SSL。

PM2

PM2 (Process Manager 2) 是一种快速简便的解决方案，用于在您的服务器或 VM 上托管您的 Nuxt 应用程序。

要使用 pm2，请使用 ecosystem.config.cjs：

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

集群模式

您可以使用 NITRO_PRESET=node_cluster 以利用 Node.js cluster 模块的多进程性能。

默认情况下，工作负载使用轮询策略分发给 worker。

了解更多

Read more in node-server 预设的 Nitro 文档.

静态托管

有两种方法可以将 Nuxt 应用程序部署到任何静态托管服务：

  • 静态站点生成 (SSG)：使用 ssr: true 在构建时预渲染应用程序的路由。（这是运行 nuxi generate 时的默认行为。）它还将生成 /200.html 和 /404.html 单页应用程序回退页面，这些页面可以在客户端渲染动态路由或 404 错误（尽管您可能需要在静态主机上配置此项）。
  • 或者，您可以使用 ssr: false（静态单页应用程序）预渲染您的站点。这将生成带有空 <div id="__nuxt"></div> 的 HTML 页面，您的 Vue 应用程序通常会在其中渲染。您将失去预渲染站点的许多 SEO 优势，因此建议改为使用 <ClientOnly> 包裹您站点中任何无法服务器渲染的部分。
Read more in Nuxt prerendering.

仅客户端渲染

如果您不想预渲染您的路由，使用静态托管的另一种方法是在 nuxt.config 文件中将 ssr 属性设置为 false。然后，nuxi generate 命令将输出一个 .output/public/index.html 入口点和 JavaScript 包，就像一个经典的客户端 Vue.js 应用程序一样。

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})
在 Nuxt 中，要启用静态生成（SSG），必须设置 ssr: true
  • ssr: true → 服务端渲染 (SSR)（或 SSG），适合内容网站 + SEO 场景
  • ssr: false → 客户端渲染（SPA），适合后台系统 + 不需要 SEO 的项目
渲染方式ssr 配置构建行为部署方式
SSR（服务端渲染）ssr: true每次请求动态运行服务端渲染需 Node 服务器
SSG（静态生成）ssr: true + nuxi generate构建时一次性执行服务端逻辑并生成 HTML可部署静态主机
SPA（客户端渲染）ssr: false构建为纯前端应用，无服务端逻辑可部署静态主机
Nuxt 静态生成原理：
const { data } = await useAsyncData(() => $fetch('/api/posts'))
当你运行 nuxi generate 时：
  • Nuxt 会执行你的页面逻辑（等同于在服务端渲染时执行）
  • 将 /api/posts 的数据请求发出
  • 拿到数据，生成 HTML 页面并写入 dist 或 .output/public
这一过程需要运行服务端渲染逻辑，所以 ssr 必须为 true。

托管服务提供商

Nuxt 可以通过最少的配置部署到多个云提供商：

Read more in Deploy.

预设

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

您可以在 nuxt.config.ts 文件中显式设置所需的预设：

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

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

Terminal
NITRO_PRESET=node-server nuxt build

🔎 查看 Nitro 部署 以获取所有可能的部署预设和提供商。

CDN 代理

在大多数情况下，Nuxt 可以使用并非由 Nuxt 本身生成或创建的第三方内容。但有时此类内容可能会导致问题，尤其是 Cloudflare 的 “Minification and Security Options”。

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

  1. Speed > Optimization > Content Optimization > 禁用 "Rocket Loader™"
  2. Speed > Optimization > Image Optimization > 禁用 "Mirage"
  3. Scrape Shield > 禁用 "Email Address Obfuscation"

通过这些设置，您可以确保 Cloudflare 不会将可能导致意外副作用的脚本注入您的 Nuxt 应用程序。

它们在 Cloudflare 仪表板上的位置有时会更改，因此请随时查看。