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

这篇具有很好参考价值的文章主要介绍了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目录,其中包含所有可用于生产的应用程序、服务器和依赖项。

使用 npm run generate 打包出来的文件如下

nuxt项目部署,npm run build 和npm run generate的区别,npm,前端,node.js

build 命令会生成一个server、一个public 的文件夹,build完之后运行npm run preview 你会发现在控制台不会打印log,此时preveiw 的本质是运行了 这句命令 ,官方文档

node .output/server/index.mjs

nuxt项目部署,npm run build 和npm run generate的区别,npm,前端,node.js 

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

使用 npm run generate 打包出来的文件如下

nuxt项目部署,npm run build 和npm run generate的区别,npm,前端,node.js

generate 命令只会生成一个public文件夹,generate 完之后运行npm run preview 你会发现在控制台每次刷新页面就会打印出来很多日志,此时preview命令本质是运行了这句命令

npx serve .output/public    

nuxt项目部署,npm run build 和npm run generate的区别,npm,前端,node.js 

 

在实际部署过程中,运行 preview命令打印log, 会很占用资源,而且会导致服务重启,出现502的情况,所以如果你的资源不够用还是建议使用 build + preview 的方式部署

nuxt2 项目使用 npm run  generate + npm run  start 就不会有这些日志打印

nuxt3 官方文档只写了 preview命令,没写start, 但是其实start也可以用,他俩本质是一样的。至于运行起来后的现象,取决于使用了build 还是generate文章来源地址https://www.toymoban.com/news/detail-605678.html

到了这里,关于nuxt项目部署,npm run build 和npm run generate的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目启动npm install和npm run serve时出现错误Failed to resolve loader:node-sass

    解决方法: 解决方法: node sass-node loader-sass 14.16.0 4.14.1 8.0.2

    2024年04月26日
    浏览(51)
  • 关于 npm run build 报错问题

    1.删除 node_modules 包 2.删除 package-lock.js 文件 3.清空 npm 缓存 npm clean cache -f 4.重新下载包 npm i 5.npm run build  

    2024年01月17日
    浏览(41)
  • 前端 node 常见的包管理工具 npm、npx、Yarn、cnpm、pnpm 的区别有哪些

    些工具都是用于管理 Node.js 包和依赖项的 npm (Node Package Manager) : npm 是 Node.js 的默认包管理工具,随同 Node.js 安装。 主要功能包括安装、发布、管理 JavaScript 包和依赖项。 npm 是最常用的包管理工具之一,拥有庞大的包仓库(npm Registry)。 npx : npx 是 npm 5.2.0 版本引入的一个工

    2024年02月20日
    浏览(42)
  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(58)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(71)
  • npm run serve与npm run dev的区别

    最近在运行前端项目时,有时用到npm run serve 有时用到npm run dev。 一般在 vue 3.x 的时候用 npm run serve,vue2.x项目运行的时候用到 npm  run dev, dev是 vue cli2 的默认执行命令, serve 是 vue cli4 的默认执行命令 例:在我们运行一些 vue 项目的时候,输入npm run serve或者 npm run dev的其中一

    2024年02月09日
    浏览(48)
  • npm run serve和npm run dev的区别

    1. 功能:通常,\\\"npm run serve\\\"用于启动开发服务器,提供实时的开发环境,支持自动重新加载和热模块替换。这样可以在开发过程中实时查看代码更改的效果。而\\\"npm run dev\\\"可以是一个自定义的指令,用于执行其他与开发相关的任务,如编译代码、运行测试等。具体功能取决于项

    2024年01月23日
    浏览(54)
  • npm run dev和npm run serve两个命令的区别

    前端开发过程中运行Vue项目的时候,有时候使用npm run serve命令可以启动项目,有时候却会报错;有时候使用npm run dev命令可以启动项目,有时候却也会报错。是什么原因造成这种情况呢,原因在于 Vue脚手架版本的问题 ,也可以理解为执行配置的脚本问题,有的脚手架版本支

    2024年02月22日
    浏览(44)
  • 【npm run serve报错问题node.js版本太高】

    提示:这里描述项目中遇到的问题: npm run serve出现下面的报错问题 提示:这里填写该问题的具体解决方案: 1、方法一: 在命令行修改环境变量: $env:NODE_OPTIONS=\\\"--openssl-legacy-provider\\\" 在启动项目: yarn start 2、方法二: 使用nvm将node修改为不高于16的版本

    2024年01月18日
    浏览(57)
  • 解决npm run build 打包出现XXXX.js as it exceeds the max of 500KB.

    问题描述: npm run build 时出现下面的问题: 在项目的根目录加粗样式下找到 .babelrc 文件或者babel.config.js文件,增加 “compact”: false ,如: 如果不存在则手动创建该文件,并填写内容如:

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包