部署

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(Process Manager 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) 会在构建时预渲染应用程序的路由。（这是运行 nuxt generate 时的默认行为。）它还会生成 /200.html 和 /404.html 单页应用回退页面，这些页面可以在客户端渲染动态路由或 404 错误（尽管您可能需要在静态主机上配置此功能）。
• 或者，您可以使用 ssr: false 预渲染您的站点（静态单页应用）。这将生成带有空 <div id="__nuxt"></div> 的 HTML 页面，其中通常会渲染您的 Vue 应用程序。您将失去预渲染站点的许多 SEO 优势，因此建议您使用 <ClientOnly> 来包装站点中无法进行服务器渲染的部分（如果有）。

仅客户端渲染

如果您不想预渲染路由，另一种使用静态托管的方式是将 ssr 属性设置为 false 在 nuxt.config 文件中。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. 速度 > 优化 > 内容优化 > 禁用“Rocket Loader™”
2. 速度 > 优化 > 图像优化 > 禁用“Mirage”
3. 抓取保护 > 禁用“电子邮件地址混淆”

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