nuxt项目部署,npm run build 和npm run generate的区别

每日鸡汤:每个你想要学习的瞬间都是未来的你向自己求救

非服务端渲染的项目,比如普通的vite + vue项目,我们在部署生产环境的时候,只需要两步

  1. 运行 npm run build 然后得到了一个 dist 文件夹
  2. 将这个dist文件夹部署到一个静态服务器上

一般来说这样就可以访问这个项目了

但是服务端渲染的项目有所不同,因为会需要在服务端运行一些代码,所以一个普通的静态服务器满足不了我们需求,我们需要在服务器端运行自己的服务端代码,所以 nuxt 项目是使用 npm run preview 这个命令运行打包出来的文件。

在部署过程中还有一个问题刚开始不懂 ,就是build 和generate 命令有啥不同!来看一下官网文档的描述

The build command creates a .output directory with all your application, server and dependencies ready for production.

build命令创建了一个.output目录,其中包含所有可用于生产的应用程序、服务器和依赖项。

The generate command pre-renders every route of your application and stores the result in plain HTML files that you can deploy on any static hosting services. The command triggers the nuxi build command with the prerender argument set to true

generate命令预呈现应用程序的每个路由,并将结果存储在可以部署在任何静态托管服务上的纯HTML文件中。该命令触发nuxi build命令,prerender参数设置为true

也就是说generate``命令在运行了 build 命令的同时,并且开启了预渲染的功能,在打包过程中会为每个路由生成一个静态的html文件 。

  • prerender:boolean - Prerenders routes at build time and includes them in your build as static assets

在构建时预渲染路由,并将它们作为静态资产包含在构建中

由于 generate ``会生成静态文件,所以更加有利于seo! 所以你的网站如果对seo【搜索引擎优化】有需求的话那么最好是用这个命令。 但是转念一想,你之所以使用 nuxt 框架不就是为了服务端渲染,不就是为了为了seo优化?

所以我建议你别纠结了,对nuxt项目就直接使用 ``generate ``命令打包部署就好了,至少我做过的nuxt项目都是用的``generate``。

相关推荐
再吃一根胡萝卜2 分钟前
如何把小米 MiMo 接入 CodeBuddy,打造私有 Agent
前端
负责的蛋挞1 小时前
异步HttpModule的实现方式
java·服务器·前端
丹宇码农4 小时前
把 HLS 字幕玩出花:zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
2501_943782354 小时前
【共创季稿事节】猜数字游戏:二分法思维与交互式反馈
前端·游戏·microsoft·harmonyos·鸿蒙·鸿蒙系统
GV191rLvq4 小时前
基于Socket实现的最简单的Web服务器【ASP.NET原理分析】
服务器·前端·asp.net
吠品4 小时前
LangChain 里 tool_call_id 为空?一次 MCP 工具集成的排查记录
前端
微信开发api-视频号协议4 小时前
企业微信二次开发中的文件系统设计:媒体资源、临时文件与业务附件
前端·微信·企业微信·媒体·ipad·微信开放平台
柒和远方5 小时前
Phase 7.4 学习博客:为什么多 API 项目需要 Swagger / OpenAPI
前端·后端·架构
张龙6875 小时前
拼多多开放平台对接踩坑实录:从 CLIENT_ID 配置到 MD5 签名算法的完整填坑指南
前端