部署

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

¥A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.

Node.js 服务器

¥Node.js Server

探索使用 Nitro 预设的 Node.js 服务器，可在任何 Node 主机上部署。

¥Discover the Node.js server preset with Nitro to deploy on any Node hosting.

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

入口点

¥Entry Point

在 Node 服务器预设的情况下运行 nuxt build 时，结果将是一个启动即用型 Node 服务器的入口点。

¥When running nuxt build with the Node server preset, the result will be an entry point that launches a ready-to-run Node server.

node .output/server/index.mjs

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

¥This will launch your production Nuxt server that listens on port 3000 by default.

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

¥It respects the following runtime environment variables:

• 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 (Process Manager 2) is a fast and easy solution for hosting your Nuxt application on your server or VM.

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

¥To use pm2, use an ecosystem.config.cjs:

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

集群模式

¥Cluster Mode

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

¥You can use NITRO_PRESET=node_cluster in order to leverage multi-process performance using Node.js cluster module.

默认情况下，工作负载使用循环策略分配给各个工作器。

¥By default, the workload gets distributed to the workers with the round robin strategy.

了解更多

¥Learn More

静态托管

¥Static Hosting

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

¥There are two ways to deploy a Nuxt application to any static hosting services:

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

仅客户端渲染

¥Client-side Only Rendering

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

¥If you don't want to pre-render your routes, another way of using static hosting is to set the ssr property to false in the nuxt.config file. The nuxi generate command will then output an .output/public/index.html entrypoint and JavaScript bundles like a classic client-side Vue.js application.

export default defineNuxtConfig({
  ssr: false
})

托管服务提供商

¥Hosting Providers

Nuxt 只需少量配置即可部署到多个云提供商：

¥Nuxt can be deployed to several cloud providers with a minimal amount of configuration:

预设

¥Presets

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

¥In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.

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

¥You can explicitly set the desired preset in the nuxt.config.ts file:

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

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

¥... or use the NITRO_PRESET environment variable when running nuxt build:

NITRO_PRESET=node-server nuxt build

🔎 检查 Nitro 部署 中所有可能的部署预设和提供程序。

¥🔎 Check the Nitro deployment for all possible deployment presets and providers.

CDN 代理

¥CDN Proxy

在大多数情况下，Nuxt 可以与非 Nuxt 自身生成或创建的第三方内容协同工作。但有时这样的内容可能会导致问题，尤其是 Cloudflare 的 "最小化和安全选项"。

¥In most cases, Nuxt can work with third-party content that is not generated or created by Nuxt itself. But sometimes such content can cause problems, especially Cloudflare's "Minification and Security Options".

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

¥Accordingly, you should make sure that the following options are unchecked / disabled in Cloudflare. Otherwise, unnecessary re-rendering or hydration errors could impact your production application.

1. 速度 > 优化 > 内容优化 > 禁用 "Rocket Loader ™"
2. 速度 > 优化 > 图片优化 > 禁用 "Mirage"
3. Scrape Shield > 禁用 "电子邮件地址混淆"

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

¥With these settings, you can be sure that Cloudflare won't inject scripts into your Nuxt application that may cause unwanted side effects.