前言
Nuxt 框架具有提供打包为多种形态的能力。
针对 Nuxt 不同的业务需求，决定着我们要把 Nuxt 打包为哪种形态。
打包为 SPA 页面，还是要具有良好 SEO 的具有服务端渲染的 SSR 页面，还是静态站点 SSG 页面，这些都是值得考量的，因为最终的打包形态决定着项目部署的方式和配置。
项目打包
打包为 SSR
直接在项目根目录执行 npm run build。
最终的打包结果会生成一个 .output 文件夹。
打包完成后，可运行 npm run preview 预览打包之后的效果。
打包为 SPA
首先，在 nuxt.config.ts 配置文件中，设置 ssr 为 false。
export default defineNuxtConfig({
ssr: false
})
然后，在项目根目录执行 npm run generate。
最终的打包结果同样会生成一个 .output 文件夹。
打包完成后，可运行 npm run preview 预览打包之后的效果。
打包为 SSG
直接在项目根目录执行 npm run generate。
最终的打包结果同样会生成一个 .output 文件夹。
打包完成后，可运行 npm run preview 预览打包之后的效果。
项目部署
部署到 Node.js 服务器
因为 Nuxt 默认是服务端渲染，访问页面是需要用到实时渲染，因此需要启动服务来运行项目，直接运行打包完成后文件中的 .output/server/index.mjs 文件。
显然，项目成功在本地运行，然后在浏览器中输入 http://localhost:3000 就能看到实际的效果。
同时，在终端命令行执行 npm run preview 命令也能够在本地预览打包之后的效果。
使用 Node 部署
项目部署到服务器只需要复制 .output 文件到服务器指定文件夹，然后使用 Node 启动项目。
在部署的时候也可以指定端口号，例如，PORT 8888 node .output/server/index.mjs。
使用 PM2 部署（推荐）
首先，在项目根目录执行 npx pm2 init simple 自动生成 ecosystem.config.js 文件。
然后，修改 ecosystem.config.js 的后缀为 .cjs 并打开 ecosystem.config.cjs 文件进行配置。
module.exports = {
apps: [
{
name: 'nuxt-template',
port: '8888',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs'
}
]
}
最后，使用 pm2 命令启动项目，在根目录命令行输入 npx pm2 start ecosystem.config.cjs。
使用 pm2 查看所有进程。
使用 pm2 停止所有进程。
部署到云服务商
Nuxt 官网提供以下三种主流的托管服务提供商，为我们提供多种部署 Nuxt 项目的方式。
使用 Vercel 部署
值得注意的是，因为 Vercel 的服务器是在国外，因此部署的项目在国内访问是受限制的，不太推荐使用这种方式。
默认使用 SSR 服务端渲染。
首先，要对 Nuxt 项目中的 nuxt.config.ts 文件进行配置，需要把其中的 nitro.preset 改为 vercel。
export default defineNuxtConfig({
nitro: {
preset: 'vercel'
}
})
值得注意的是，因为 Vercel 号称是零配置服务商，因此，这一步也可以省略掉。
然后，在 Vercel 官网进行登录，此时可以选择第三方登录 Github。
其次，把我们需要部署的 Nuxt 项目发布至 Github。
接着，在 Vercel 官网中选择自己的 Github 账号之后，再选择要导入的 Github 项目。
最后，就是部署前的配置工作，Vercel 会自动识别项目使用的是哪种框架，并且是默认自带配置的，此时我们直接点击部署即可。
项目在部署的过程中，是可以看到实时运行日志的。
如果部署成功，会显示成功页面，包括项目的首页展示，以及域名配置等信息。
值得注意的是，.vercel.app 是 Vercel 提供的免费子域名，这是因为每个在 Vercel 上部署的项目都会自动分配一个这样的子域名，便于开发者能够立即访问和测试项目。
与此同时，Vercel 也会自动处理 DNS 配置和证书管理，大大简化部署的过程，提高开发效率。
我们试着改一下默认的域名，直接使用官网帮我们配置的子域名 .vercel.app，.vercel.app 之前是可以自定义的，例如就叫 festack-nuxt-template.vercel.app，配置完毕后保存。
接着访问 festack-nuxt-template.vercel.app，就能看到项目页面。
如果要发布新的版本，使用 Git 把代码提交至 Github 仓库时，Vercel 就会自动帮我们重新部署。
使用 NuxtHub 部署
对于个人练习的项目，这种部署方式是值得推荐的，在国内的访问也还行，没有那么慢。
具体的部署方式参照 Nuxt 官网中所介绍的以及官方文档就行。
总结
关于 Nuxt 项目的打包与部署，是 Nuxt 框架中一个非常重要的环节，这决定你的项目是否能如期上线，并稳定运行而不出差错，因此，针对这一环节，我们要严谨且认真对待。
