部署

了解如何将你的 Nuxt 应用部署到任何托管服务提供商。

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

如果你想寻找支持 Nuxt 的云服务提供商列表,请参阅 托管服务提供商 章节。

Node.js 服务器

了解使用 Nitro 的 Node.js 服务器预设,以便部署到任何 Node 托管服务。

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

入口点

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

终端
NODE_ENV=production node .output/server/index.mjs

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

运行服务器时请设置 NODE_ENV=production。某些依赖项(尤其是 Vue Router)只有在设置此项时才会剥离仅限开发环境的警告,因此如果不设置,当路由不匹配时,日志中可能会充斥着诸如 [Vue Router warn]: No match found for location with path … 的消息。

它支持以下运行时环境变量

  • NITRO_PORTPORT(默认为 3000
  • NITRO_HOSTHOST(默认为 '0.0.0.0'
  • NITRO_SSL_CERTNITRO_SSL_KEY - 如果两者都存在,服务器将以 HTTPS 模式启动。在绝大多数情况下,除了测试之外不应使用此功能,Nitro 服务器应运行在诸如 nginx 或 Cloudflare 等负责终止 SSL 的反向代理后面。

PM2

PM2(Process Manager 2)是在你的服务器或虚拟机上托管 Nuxt 应用的一种快速且简便的解决方案。

要使用 pm2,请使用 ecosystem.config.cjs 文件

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

集群模式

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

默认情况下,工作负载会通过轮询(round robin)策略分配给各个工作线程。

了解更多

阅读更多内容,请参阅 Nitro 关于 node-server 预设的文档

静态托管

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

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

预渲染的路由还会发出带有构建时捕获的数据的 _payload.json 文件,Nuxt 在客户端导航期间会重用这些文件。了解更多关于 有效负载提取(payload extraction) 的信息。

静态回退页面

Nuxt 可以为静态主机生成两个回退页面

  • 200.html 是单页应用的回退页面。当你希望客户端路由处理 URL 时,请配置你的主机,使其为未匹配的路由提供此页面。
  • 404.html 是未找到(404)的回退页面。配置你的主机,使其为应保持 404 状态的路由提供此页面。

nuxt generatenuxt build --prerender 会自动生成这些文件。如果你将 nuxt build 与路由规则结合使用来预渲染选定的路由,则需要显式添加回退页面

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/200.html': { prerender: true },
  },
})

一些托管服务提供商使用 200.html,一些使用 404.html,还有一些允许你配置两者。部署后,请检查你的托管服务提供商的静态回退或重写设置。

阅读更多内容,请参阅 Nuxt 预渲染

仅客户端渲染

如果你不想预渲染路由,使用静态托管的另一种方法是在 nuxt.config 文件中将 ssr 属性设置为 false。随后,nuxt generate 命令将输出 .output/public/index.html 入口点以及类似于经典客户端 Vue.js 应用的 JavaScript 打包文件。

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
})

托管服务提供商

只需进行极少量的配置,Nuxt 就可以部署到多个云服务提供商

阅读更多内容,请参阅 部署

预设

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

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

nuxt.config.ts
// @errors: 2353
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server',
  },
})

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

终端
NITRO_PRESET=node-server nuxt build

🔎 查看 Nitro 部署 了解所有可能的部署预设和提供商。

CDN 代理

在大多数情况下,Nuxt 可以与并非由 Nuxt 生成或创建的第三方内容一起正常工作。但有时此类内容可能会导致问题,尤其是 Cloudflare 的“代码压缩和安全选项(Minification and Security Options)”。

因此,你应确保在 Cloudflare 中取消勾选/禁用以下选项。否则,不必要的重新渲染或激活错误可能会影响你的生产应用。

  1. 速度 (Speed) > 设置 (Settings) > 内容优化 (Content Optimization) > 禁用 "Rocket Loader™"
  2. 安全 (Security) > 设置 (Settings) > 禁用 "电子邮件地址混淆 (Email Address Obfuscation)"

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

它们在 Cloudflare 仪表板中的位置有时会发生变化,因此请随时四处找找。