部署项目

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

Node.js 服务器

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

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

入口点

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

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（进程管理器 2）是一个快速且便捷的解决方案，用于在您的服务器或虚拟机上托管 Nuxt 应用。

要使用 pm2，请使用 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 模块实现多进程性能。

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

了解更多

静态托管

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

• 使用开启 ssr: true 的静态站点生成 (SSG)，在构建时预渲染应用的所有路由。（这是运行 nuxt generate 时的默认行为。）它还会生成 /200.html 和 /404.html 的单页应用后备页，能够在客户端渲染动态路由或 404 错误（不过您可能需要在静态托管服务上做相应配置）。
• 另外，您可以在 ssr: false 时预渲染您的站点（静态单页应用）。这将生成 HTML 页面，页面中 Vue 应用通常渲染的位置仅为一个空的 <div id="__nuxt"></div>。这样会失去许多预渲染的 SEO 优势，因此建议用 <ClientOnly> 组件包裹不能服务器渲染的部分（如果有的话）。

仅客户端渲染

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

export default defineNuxtConfig({
  ssr: false
})

托管服务提供商

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

预设

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

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

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

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

NITRO_PRESET=node-server nuxt build

🔎 查看 Nitro 部署 了解所有可能的部署预设及支持的服务提供商。

CDN 代理

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

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

1. Speed > Optimization > 内容优化 > 禁用 “Rocket Loader™”
2. Speed > Optimization > 图片优化 > 禁用 “Mirage”
3. Scrape Shield > 禁用 “邮箱地址混淆”

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