npm run dev 与 npm run production 的区别

最新推荐文章于 2025-06-02 09:00:00 发布
最新推荐文章于 2025-06-02 09:00:00 发布
阅读量7.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Laravel 文章标签： npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sometimesnevermind/article/details/83149320
本文对比了npm run dev和npm run production两种构建模式。前者编译时间快但文件体积较大，后者则相反，编译时间长但产出的文件体积小。文章详细介绍了这两种模式在编译时间和文件大小上的具体差异。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

废话少说，直接上图。

  1. npm run dev
    npm run dev
  2. npm run production
    npm run production

其中的区别有两点：

  1. 编译时间：可以看到是7703ms和30858ms的差别
  2. 文件大小：其中一个名为app.js的文件，大小是1.24mb和300kb的差别

剩下一处区别则是app.css，如果有使用导航栏的话可以通过页面源代码看到，由
在这里插入图片描述
总之很长的样子，可以变为
在这里插入图片描述
嘛，挺宽的样子

编译结束后，这个文件其实是你想怎么样都好，没有影响，所以我的理解是：便于删除，不知道是不是?

欢迎评论区补充。

Node.js：pm2管理进程启动npm run dev和开机自启
彭世瑜的博客
02-28 7764
文档安装管理命令。
npm run serve/build 背后的真实操作
热门推荐
奔跑的痕迹的博客
02-28 1万+
vue CLI 用起来的确很舒服，方便省事，但他经过层层封装很难明白，执行完那个npm run serve/build 后他都干了些什么，甚至不知道整个项目是怎么跑起来的，今天自己抽时间就去瞅瞅,为加深记录特此记录记录 文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...
多环境变量 development 开发 production 生产
weixin_60408555的博客
04-27 607
多环境变量 一般分为开发环境和生产环境 development 开发 production 生产（上线） 怎么配置多环境变量 首先建立两个文件 在根目录 .env.dev 里面写上 NODE_ENV=“development” .env.prod 里面写上 NODE_ENV=“production” 这样我们可以通过 process.env.NODE_ENV 这个变量来判断当前的环境 比如我们可以通过判断不同的环境 在 axios 请求的时候设置不同的 baseURL 以及在生产模式种取消 log 在开发的
npm install 、npm install --production 、npm install --save 、 npm install --save-dev
douxubao的博客
03-11 9327
首先四个都会下载js包到moudles里面，只是package.json里面不同 npm install 安装所有依赖 npm install --production 安装生产依赖 npm install xx --save 安装XX到生产环境依赖 npm install --save-dev 安装XX到开发环境依赖 ...
npm run dev都做了哪些事
最新发布
曹昆的技术博客
06-02 749
当执行时，它会运行项目文件中定义的"dev"脚本命令。
npm开发模式和生产模式
Pert的博客
10-27 2580
说说对npm的开发模式和生产模式的理解 大前端 nodejs这些年的发展非常快，相信没有哪个前端不知道的了，npm也成为了前端开发中经常用到了的一个命令。那么npm不是只用一个 "npm install xxx"命令就够了吗？实际上并不是这样，发现有些团队在使用npm的时候没有认真去搞懂npm在团队里面或者说是在项目里面的一些用法。 1.从认识package.json开始 **　　在团队里面开发，一般会分为开发模式和生产模式（可能会有不同的叫法），有时候还有测试模式，那么这些模式其实跟npm有很大的联系的.
Vue .env .env.development .env.production的区别及使用场景
m0_70276286的博客
03-25 1331
Vue .env .env.development .env.production的区别及使用场景
npm run buil构建后页面白屏_构建微前端 Angular Elements
weixin_39593247的博客
11-30 186
原文链接​itnext.io原作者:Lionel Robbin​itnext.io译者:知乎用户​www.zhihu.com现在，流行的单页面应用都在逐渐单片化，并使用服务端微服务架构。单片应用的思路逐渐壮大，非单片应用逐步被拆分为单片应用，并由多个不同的开发团队负责开发，这样的技术思路很先进但也增加了维护难度。 但大趋势是，将大型前端应用程序划分为多个微前端应用程序。通过这样的方式，不同的开发团...
关于laravel下执行npm run dev 或者npm run watch-poll报错的问题
你会后悔吗的博客
07-05 6472
我感觉问题主要是因为操作系统不同的原因，在linux是不需要安装cross-env的，虚拟机里操作那么是不需要安装的，这东西是给windows用的所以，不同的环境下package.json下的内容应该是不同的Windows下需要安装cross_env,所以package.json应该是这样的，路径不对也会出错{    "private": true,    "scripts": {        ...
前后端分离的开发框架中，以下几种命令：npm run dev、npm run build:stage 和 npm run build:prod分别有什么作用和区别（详解）
Future_yzx的博客
02-05 2827
在前后端分离的开发框架中（例如 Vue、React 等），前端的构建和启动过程通常包括以下几种命令：npm run dev和 npm run build:prod。命令环境类型主要功能典型用途开发环境启动开发服务器，支持热更新，调试信息丰富，快速开发前端开发时本地启动应用，调试和修改功能测试环境构建并优化适合测试环境的代码，轻度优化，准备部署到测试环境部署到测试或预发布环境，进行集成和验收测试生产环境进行生产环境级别的压缩和优化，生成适合上线的代码。
npm run dev失败
04-09 1755
问题 前端最近任务多，没时间调试CEF上的网页，只好自己搭建VUE本地环境调试 但 在项目目录下 npm run dev时，出现如下错误 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决 我是通过下面的方法，糊里糊涂的解决了 首先，http://nodejs.cn/下载最新版的node，老版本打开已有...
webpack npm的dev,run,start区别.zip
12-11
在某些项目中，`npm start`可能与`npm run dev`相同，但通常`npm start`会用于生产环境，意味着它可能配置为执行更优化的构建过程，例如使用`--production`标志运行Webpack，这将启用代码压缩、去除未使用的代码等...
Webpack5 生产模式
weixin_52053631的博客
03-12 251
Webpack5 生产模式
关于环境变量
m0_61749828的博客
10-27 106
1.生产环境.env.production 当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量 2.开发环境 env.production 当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量 3.预发布环境.env.staging 可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据) ...
Vue进阶（环境变量 和 模式切换）（npm run dev与npm run serve的区别）
qq_41765777的博客
11-20 1万+
1、开发环境与生产环境切换 （1）根目录下新建 .env.dev文件和.env.prod环境变量文件如下： .env.dev文件 (开发环境模式下使用的环境变量） NODE_ENV = development VUE_APP_BASE_API = http://localhost:8088/api VUE_APP_BASE_IMG_URL = http://localhost:8088 .env.prod文件（生产环境模式下使用的环境变量） NODE_ENV = production VU
npm run dev 和npm dev、npm run start和npm start、npm run serve和npm serve等的区别
jjw_zyfx的博客
01-09 2314
npm run dev 和npm dev、npm run start和npm start、npm run serve和npm serve等的区别
关于vue的npm run dev和npm run build
weixin_30852367的博客
06-30 2797
├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpa...
深入浅出dev、test、pre、pro四大环境
十一月的Jay
11-16 1万+
今天给大家介绍一下开发过程中，四个环境以及各自的功能特点，四个环境分别是：pro、pre、test、dev环境，中文名字：生产环境、灰度环境、测试环境、开发环境。其实大家看英文应该就差不多可以看出来对应的是什么环境。 环境介绍： pro环境：生产环境，面向外部用户的环境，连接上互联网即可访问的正式环境。 pre环境：灰度环境，外部用户可以访问，但是服务器配置相对低，其它和生产一样。 test环境：测试环境，外部用户无法访问，专门给测试人员使用的，版本相对稳定。 dev环境：开发环境，外部用户无法访问，开发人
「随手一记」「Vue.js篇」「npm run dev（build）配置开发、测试、生产环境」
一一丁点的博客
06-11 7726
在开发及线上（打包）过程中，经常会遇到根据不同的环境（开发、测试、生产）进行项目的发布。因此本文章主要介绍使用 npm run dev 和 npm run build 进行配置开发、测试、生产环境的切换，这只是切换方式之一（当然还有其他的方式，这里不做介绍）。 本文章介绍的方法有点繁琐，仅供参数，若有哪里写错或不足的地方，请指教。 项目介绍 开发工具：Visual Studio Code 构建脚支架：webpack 项目名称：VUE-DEMO 涉及目录及文件 主要涉及目录及默认文件：b..
npm install 和 npm run dev是什么意思
04-01
### 关于 `npm install` 和 `npm run dev` 命令的功能及区别 #### 一、`npm install` 的功能 `npm install` 是 Node.js 中用于安装依赖包的核心命令。它会读取当前项目的 `package.json` 文件中的 `dependencies` 和 `devDependencies` 字段，下载并安装这些指定的模块到本地的 `node_modules` 目录下[^1]。 - 如果未指定任何参数，则默认安装所有列在 `package.json` 中的依赖项。 - 可以通过附加特定选项来控制行为，例如全局安装 (`-g`) 或仅安装生产环境所需的依赖 (`--production`)。 示例代码如下： ```bash npm install ``` 此命令通常会在初始化新项目或者克隆现有仓库后首次运行，目的是构建完整的开发环境所需的所有库文件[^2]。 #### 二、`npm run dev` 的作用 `npm run dev` 属于自定义脚本调用的一种形式。具体来说，它是执行存储在 `package.json` 文件内的 `"scripts"` 部分下的名为 `dev` 的指令集合[^3]。 开发者可以根据实际需求设置不同的任务逻辑；比如启动 Webpack 开发服务器、编译 TypeScript 源码或是开启调试模式等等操作都可以封装成这样的子命令供后续便捷调用。下面是一个典型的例子展示如何配置以及触发该过程： 假设我们在某个前端工程中有这样一段 JSON 定义： ```json { "scripts": { "dev": "webpack-dev-server --open" } } ``` 那么当我们键入 `npm run dev` 后实际上就相当于手动敲打了后面那条较长且复杂的 Shell 脚本语句去实现快速进入交互界面等功能[^4]。 #### 三、两者之间的主要差异对比分析表 | **比较维度** | **npm install** | **npm run dev** | |---------------------|----------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------| | 主要用途 | 下载并管理第三方库 | 执行预设好的自动化流程 | | 影响范围 | 修改本地磁盘上的目录结构(创建 node_modules)，更新 package-lock.json | 不改变物理文件状态 | | 是否涉及网络请求 | 大部分情况下需要联网获取远程资源 | 几乎不需要额外的数据交换 | | 错误处理难度 | 当遇到权限不足等问题可能导致失败 | 若脚本本身存在语法错误则较难排查 | 综上所述可以看出这两者虽然同属 NPM 生态体系的一部分但却承担着截然不同使命的角色定位^. ```javascript // 示例：简单的 JavaScript 应用场景模拟上述两个命令的效果 const fs = require('fs'); function simulateNpmInstall() { console.log("正在模拟 npm install..."); const dependencies = ['react', 'lodash']; try { if (!fs.existsSync('./node_modules')) { fs.mkdirSync('./node_modules'); } for (let dep of dependencies){ fs.writeFileSync(`./node_modules/${dep}`, ''); } console.log("完成!"); } catch(err) { throw new Error("安装过程中发生异常"); } } function simulateDevScriptExecution(){ console.log("正在模拟 npm run dev..."); // 这里只是简单打印日志代替真实业务逻辑 setInterval(() => {console.log("服务已启动...");}, 1000); } simulateNpmInstall(); setTimeout(simulateDevScriptExecution, 5000); // 延迟几秒再执行以便区分两者的顺序关系 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值