使用 Vue & UI Pro 的仪表板模板

部署

了解如何将您的 Nuxt 应用程序部署到任何托管提供商。

Nuxt 应用程序可以部署在 Node.js 服务器上,预渲染以进行静态托管,或部署到无服务器或边缘 (CDN) 环境。

如果您正在寻找支持 Nuxt 3 的云提供商列表,请参阅 托管提供商 部分。

Node.js 服务器

使用 Nitro 的 Node.js 服务器预设,部署到任何 Node 托管平台。

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

入口点

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

终端
node .output/server/index.mjs

这将启动您的生产 Nuxt 服务器,默认情况下监听端口 3000。

它尊重以下运行时环境变量

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

PM2

PM2(进程管理器 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'
    }
  ]
}

集群模式

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

默认情况下,工作负载使用循环策略分配给工作进程。

了解更多

Nitro 文档的 node-server 预设部分 中阅读更多内容。

静态托管

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

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

基于爬取的预渲染

使用 nuxi generate 命令 使用 Nitro 爬虫构建并预渲染您的应用程序。此命令类似于 nuxt buildnitro.static 选项设置为 true,或运行 nuxt build --prerender

终端
npx nuxi generate

就是这样!您现在可以将 .output/public 目录部署到任何静态托管服务,或使用 npx serve .output/public 在本地预览。

Nitro 爬虫的工作原理

  1. 加载应用程序根路由 (/) 的 HTML、~/pages 目录中的任何非动态页面以及 nitro.prerender.routes 数组中的任何其他路由。
  2. 将 HTML 和 payload.json 保存到 ~/.output/public/ 目录,以便静态提供。
  3. 在 HTML 中查找所有锚点标签 (<a href="...">) 以导航到其他路由。
  4. 对找到的每个锚点标签重复步骤 1-3,直到没有更多锚点标签可爬取。

了解这一点很重要,因为无法链接到可发现页面的页面无法自动预渲染。

阅读有关 nuxi generate 命令的更多信息。

选择性预渲染

您可以在 nuxt.config 文件中手动指定 Nitro 将在构建期间获取和预渲染的路由,或忽略您不想预渲染的路由,例如 /dynamic

nuxt.config.ts
export default 
defineNuxtConfig
({
nitro
: {
prerender
: {
routes
: ['/user/1', '/user/2'],
ignore
: ['/dynamic']
} } })

您可以将此与 crawlLinks 选项结合使用,以预渲染爬虫无法发现的一组路由,例如您的 /sitemap.xml/robots.txt

nuxt.config.ts
export default 
defineNuxtConfig
({
nitro
: {
prerender
: {
crawlLinks
: true,
routes
: ['/sitemap.xml', '/robots.txt']
} } })

nitro.prerender 设置为 true 等同于将 nitro.prerender.crawlLinks 设置为 true

阅读有关 Nitro 文档中预渲染的更多信息。

仅客户端渲染

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

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

托管提供商

Nuxt 3 可以部署到多个云提供商,只需很少的配置。

部署 中了解更多。

预设

除了 Node.js 服务器和静态托管服务,Nuxt 3 项目还可以使用几个经过良好测试的预设进行部署,只需很少的配置。

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

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. 速度 > 优化 > 自动最小化:取消选中 JavaScript、CSS 和 HTML
  2. 速度 > 优化 > 禁用“Rocket Loader™”
  3. 速度 > 优化 > 禁用“Mirage”
  4. 抓取屏蔽 > 禁用“电子邮件地址混淆”
  5. 抓取屏蔽 > 禁用“服务器端排除”

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