部署
Nuxt 应用可以部署在 Node.js 服务器上、预渲染用于静态托管,或者部署到无服务器(Serverless)或边缘(CDN)环境中。
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_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',
env: {
NODE_ENV: 'production',
},
},
],
}
集群模式
你可以使用 NITRO_PRESET=node_cluster,以便利用 Node.js 的 cluster 模块来提升多进程性能。
默认情况下,工作负载会通过轮询(round robin)策略分配给各个工作线程。
了解更多
静态托管
将 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 generate 和 nuxt build --prerender 会自动生成这些文件。如果你将 nuxt build 与路由规则结合使用来预渲染选定的路由,则需要显式添加回退页面
export default defineNuxtConfig({
routeRules: {
'/200.html': { prerender: true },
},
})
一些托管服务提供商使用 200.html,一些使用 404.html,还有一些允许你配置两者。部署后,请检查你的托管服务提供商的静态回退或重写设置。
仅客户端渲染
如果你不想预渲染路由,使用静态托管的另一种方法是在 nuxt.config 文件中将 ssr 属性设置为 false。随后,nuxt generate 命令将输出 .output/public/index.html 入口点以及类似于经典客户端 Vue.js 应用的 JavaScript 打包文件。
export default defineNuxtConfig({
ssr: false,
})
托管服务提供商
只需进行极少量的配置,Nuxt 就可以部署到多个云服务提供商
预设
除了 Node.js 服务器和静态托管服务外,Nuxt 项目还可以通过几个经过充分测试的预设和极少量的配置进行部署。
你可以在 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 中取消勾选/禁用以下选项。否则,不必要的重新渲染或激活错误可能会影响你的生产应用。
- 速度 (Speed) > 设置 (Settings) > 内容优化 (Content Optimization) > 禁用 "Rocket Loader™"
- 安全 (Security) > 设置 (Settings) > 禁用 "电子邮件地址混淆 (Email Address Obfuscation)"
通过这些设置,你可以确保 Cloudflare 不会向你的 Nuxt 应用中注入可能导致不必要副作用的脚本。