部署项目

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

Node.js 服务器

发现可与 Nitro 一起使用的 Node.js 服务器预设，以便在任何 Node 托管环境中部署。

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

入口点

运行 nuxt build 与 Node 服务器预设时，结果将是一个启动准备运行的 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 模块的多进程性能。

默认情况下，工作负载通过轮询策略分配给工作进程。

了解更多

静态托管

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

• 使用 ssr: true 的静态站点生成 (SSG) 在构建时预渲染你的应用路由。（这是运行 nuxi generate 时的默认行为。）它还会生成 /200.html 和 /404.html 单页面应用后备页，可以在客户端上渲染动态路由或 404 错误（尽管你可能需要在静态托管上配置此操作）。
• 另外，你可以使用 ssr: false 预渲染你的站点（静态单页面应用）。这将生成 HTML 页，其中包含一个空的 <div id="__nuxt"></div>，你的 Vue 应用通常会在此处渲染。你将失去许多预渲染网站的 SEO 优势，因此建议使用 <ClientOnly> 将无法服务器渲染的部分包裹起来（如果有的话）。

仅客户端渲染

如果你不想预渲染你的路由，使用静态托管的另一种方法是在 nuxt.config 文件中将 ssr 属性设置为 false。然后 nuxi 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. 加速 > 优化 > 内容优化 > 禁用 "Rocket Loader™"
2. 加速 > 优化 > 图像优化 > 禁用 "Mirage"
3. 抓取保护 > 禁用 "邮箱地址模糊化"

通过这些设置，你可以确保 Cloudflare 不会将脚本注入到你的 Nuxt 应用中，从而可能导致不必要的副作用。