部署

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

Node.js 服务器

使用 Nitro 的 Node.js 服务器预设，了解如何在任意 Node 托管环境中部署。

• 默认输出格式（如果未指定或自动检测）
  
• 仅加载渲染请求所需的 chunk，以优化冷启动时间
  
• 适用于将 Nuxt 应用部署到任何 Node.js 托管环境

入口点

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

node .output/server/index.mjs

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

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

• NITRO_PORT or PORT（默认 3000）
• NITRO_HOST or 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 模块实现多进程性能。

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

了解更多

静态托管

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

• 使用 ssr: true 的静态站点生成（SSG）会在构建时预渲染应用的路由。（在运行 nuxt generate 时这是默认行为。）它还会生成 /200.html 和 /404.html 的单页应用回退页面，可以在客户端渲染动态路由或 404 错误（不过你可能需要在静态托管服务上进行相应配置）。
• 或者，你可以将站点以 ssr: false 的方式预渲染（静态单页应用）。这会生成带有空的 <div id="__nuxt"></div> 的 HTML 页面，Vue 应用通常会在此处渲染。你会失去许多预渲染带来的 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 中取消选中 / 禁用以下选项。否则，不必要的重新渲染或 hydration 错误可能会影响你的生产应用。

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

有了这些设置，你就可以确保 Cloudflare 不会将脚本注入到你的 Nuxt 应用中，进而导致不想要的副作用。