本讲我们将探讨 Nuxt 项目的打包与部署，涉及内容如下：

• 多种打包方式；
• 部署为 Node.js 服务；
• 部署为静态服务；
• 云服务。

# 多种打包方式

与传统服务端渲染只能发布于 Node.js 服务不同，Nuxt 应用不仅可以发布在 Node.js 服务上，还能预渲染内容做为静态服务，Nuxt3 甚至可以发布在 serverless 或 cdn 等云服务环境。

打包 Nuxt 项目可以用nuxt build或nuxt generate，根据配置不同，可分为以下几种方式：

• SSR：nuxt build。代码会被打包到.output目录，打包产物分为 public 和 server 两部分。入口为 index.mjs，可以使用 node 或 pm2 等进程管理工具启动服务，也可以配合nuxt preview启动预览服务。
• SPA：ssr:false + nuxt generate。产物只有 .output/public 中的静态文件，发布 .output/public 即可。但是 SPA 需要在运行时访问接口获取数据，因此仍然需要提供接口服务才能正常显示页面。
• SSG：nuxt generate。产物只有 .output/public 中的静态文件，发布 .output/public 即可。这种方式会在创建时生成页面内容，因此只需要提供静态服务即可预览。
• 其他服务：presets，可用于其他非 node 运行时打包，例如 deno，serverless，edge worker 等。产物根据预设不同会有不同，部署需要按照对应的平台进行操作。

# 打包 SSR

默认情况下，直接执行nuxt build：

复制代码yarn build

打包结果如下：server 内会有内容，index.mjs 为入口文件。

# 打包 SSG

默认情况下直接执行 nuxt generate：

复制代码yarn generate

下图为 generate 结果：server是空的，只有 public 中的静态内容。

# 打包 SPA

配置 ssr: false，然后执行 nuxt generate：

arduino
复制代码export default defineNuxtConfig({
  ssr: false,
})
复制代码yarn generate

下图为 generate 结果：server是空的，跟 SSG 略有不同，动态的 detail 没有了，会作为前端动态路由出现。

# 使用 presets

配置 nitro.preset选项即可。

例如，我们准备发布到 vercel，可以设置 nitro.preset 为 vercel 或 vercel edge。

# 部署为 Node.js 服务

针对前面介绍的 SSR 方式打包，访问页面需要服务器实时渲染，因此需要启动 node server。

# 启动 node.js 服务

执行如下命令启动服务：

bash
复制代码node .output/server/index.mjs