部署 Nuxt 3 应用
通用 Vue 应用，支持 SSR、nitro 服务器引擎和基于预设的部署到 Vercel、Netlify、Cloudflare 和 Node。
平台进阶
为什么
Nuxt 3 的 Nitro 引擎自动检测部署目标，按预设生成优化的 serverless/edge/Node 包。让 Vue 开发者获得与 Next.js 在 Vercel 上相同的零配置部署体验。
何时使用
Vue 应用需要 SSR/SSG/ISR、API 路由或边缘渲染时用 Nuxt 3。需要 SEO 或服务端逻辑时优于纯 Vue。
如何做
1. 设预设 — nuxt.config nitro.preset 或平台自动检测
2. 构建 — npm run build 生成 .output/ 含 server + public
3. Vercel/Netlify — git push，自动检测，零配置
4. Cloudflare — nitro.preset: "cloudflare-pages"，用 wrangler 部署
5. Node — npm run build && node .output/server/index.mjs
6. 静态 — nitro.preset: "static" 全 SSG，输出 .output/public
7. 环境变量 — runtimeConfig 服务端，public 客户端
示例
// nuxt.config.ts — Cloudflare Pages 预设
export default defineNuxtConfig({
nitro: { preset: "cloudflare-pages" },
runtimeConfig: {
apiKey: process.env.NUXT_API_KEY, // 仅服务端
public: { siteUrl: process.env.NUXT_PUBLIC_SITE_URL },
},
});
// Dockerfile — Node 服务器
FROM node:20-alpine AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/.output ./.output
EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]
// package.json — 静态生成
{ "scripts": { "generate": "nuxt generate" } } // 输出 .output/public
常见问题
- ⚠平台预设错误 — 自动检测失败，显式设 nitro.preset
- ⚠runtimeConfig 暴露给客户端 — 密钥放仅服务端 runtimeConfig，非 public
- ⚠Cloudflare 包过大 — Node 兼容问题，用 cloudflare（workers）预设注意大小限制
最佳实践
- ✓nuxt.config 中显式固定 nitro.preset，避免跨环境自动检测意外
- ✓用 useRuntimeConfig() 获取环境变量 — 应用代码中绝不直接用 process.env
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求