5-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》应用程序构建和部署使用

最新推荐文章于 2025-10-01 22:30:29 发布

原创

最新推荐文章于 2025-10-01 22:30:29 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了如何使用Nuxt3框架构建和部署应用程序，包括Node.js、PM2、Nginx等静态服务器及云服务的部署策略。通过配置打包脚本和使用各种工具，确保Nuxt3应用在不同环境中顺利运行。

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例在线预览网址：https://www.dvtop.cn
Nuxt3应用程序构建方式多种，可以支持不同应用场景构建和部署使用。

打包脚本在~/package.json的scripts节点中配置，如下所示。

"scripts": {

"build": "nuxt build",

"dev": "nuxt dev",

"generate": "nuxt generate",

"preview": "nuxt preview",

"postinstall": "nuxt prepare"

运行命令	产出描述
npm run dev	启动开发服务器，默认配置下服务网址为http://localhost:3000。开发时常用。
npm run build	使用混合渲染模式创建一个.output目录，其中包含所有应用程序、服务器和依赖项，可用于生产。可通过node、pm2等启动后提供WEB服务。打包成混合渲染程序，常用。
npm run generate	使用SPA方式预渲染应用程序的每个路由（其实是启动server对整个程序代码中涉及的URL进行一次服务端和客户端渲染），将结果存储在纯 HTML 文件中，可以部署在任何静态托管服务上。该命令触发nuxi build带有prerender:true的参数。打包成SPA客户端渲染程序，常用。注意：服务端渲染的内容都可正常访问（已知$fetch请求数据会异常）；客户端渲染如果涉及到访问Nuxt的server api等情况会不正常，访问外部数据API正常，请上线前完整验证。